1. > 
    2. 
    
    
    
    
  2. <html> 
    3. 
    
    
    
    
  3. <head> 
    4. 
    
    
    
    
  4. <meta http-equiv="Content-Type" content="text/html; charset=gbk"> 
    5. 
    
    
    
    
  5. <title>kissy弹窗title> 
    6. 
    
    
    
    
  6. <style type="text/css"> 
    7. 
    
    
    
    
  7. .ks-popbox-container{position:absolute;z-index:200;background:#fff;border:5px solid #ccc;} 
    8. 
    
    
    
    
  8. .ks-popbox-container .ks-popbox-title{width:100%;height:22px;background:#fff;text-indent:5px;line-height:22px;font-size:12px;font-family:Microsoft Yahei;color:#666;border-bottom:1px solid #ddd;} 
    9. 
    
    
    
    
  9. .ks-popbox-container .ks-popbox-title .ks-popbox-close{position:absolute;right:0px;top:0px;display:block;width:22px;height:22px;background:#7f7f7f;overflow:hidden;border-top:none;background:url('../../p_w_picpaths/popbox/close.gif') no-repeat -3px 2px;} 
    10. 
    
    
    
    
  10. .ks-popbox-wrapper{position:absolute;top:0px;left:0px;z-index:100;background:#444;filter:alpha(opacity =40);-moz-opacity:0.4;-khtml-opacity:0.4;opacity:0.4;} 
    11. 
    
    
    
    
  11. style> 
    12. 
    
    
    
    
  12. <script src="http://assets.daily.taobao.net//??s/kissy/1.2.0/kissy-min.js,apps/sportalapps/global/1.0/seller-global-min.js?t=20120319.js">script> 
    13. 
    
    
    
    
  13. <script type="text/javascript"> 
    14. 
    
    
    
    
  14. /** 
    15. 
    
    
    
    
  15.  * 弹窗 
    16. 
    
    
    
    
  16.  * @author huxiaoqi 
    17. 
    
    
    
    
  17.  */ 
    18. 
    
    
    
    
  18. KISSY.add("popbox",function(S, DOM, Event){ 
    19. 
    
    
    
    
  19.     var obj = null; 
    20. 
    
    
    
    
  20.     var $ = S.all; 
    21. 
    
    
    
    
  21.     var CLIENT_WIDTH = document.body.clientWidth; 
    22. 
    
    
    
    
  22.     var CLIENT_HEIGHT = document.body.clientHeight; 
    23. 
    
    
    
    
  23.     var AVAIL_WIDTH = window.screen.availWidth; 
    24. 
    
    
    
    
  24.     var AVAIL_HEIGHT = window.screen.availHeight; 
    25. 
    
    
    
    
  25.     var isModal = null; 
    26. 
    
    
    
    
  26.     var wrapper = null; 
    27. 
    
    
    
    
  27.     function Popbox(container,config){ 
    28. 
    
    
    
    
  28.         obj = $(container); 
    29. 
    
    
    
    
  29.         var self = this; 
    30. 
    
    
    
    
  30.         if(!self instanceof Popbox){ 
    31. 
    
    
    
    
  31.             return new Popbox(container,config); 
    32. 
    
    
    
    
  32.         } 
    33. 
    
    
    
    
  33.         this.init(this.Config, config); 
    34. 
    
    
    
    
  34.     } 
    35. 
    
    
    
    
  35.     Popbox.prototype.Config = { 
    36. 
    
    
    
    
  36.         autoOpen:true, 
    37. 
    
    
    
    
  37.         width:400, 
    38. 
    
    
    
    
  38.         height:240, 
    39. 
    
    
    
    
  39.         modal:false, 
    40. 
    
    
    
    
  40.         title:'this is a dialog', 
    41. 
    
    
    
    
  41.         clsPrefix:'ks-popbox-' 
    42. 
    
    
    
    
  42.     }; 
    43. 
    
    
    
    
  43.     Popbox.prototype.init = function(Config,config){ 
    44. 
    
    
    
    
  44. //      设置初始属性 
    45. 
    
    
    
    
  45.         var _config = S.mix(Config,config);  
    46. 
    
    
    
    
  46.         var _title = _config.title; 
    47. 
    
    
    
    
  47.         var _clsPrefix = _config.clsPrefix; 
    48. 
    
    
    
    
  48.         var _width = _config.width; 
    49. 
    
    
    
    
  49.         var _height = _config.height; 
    50. 
    
    
    
    
  50.         var LEFT = (CLIENT_WIDTH - _width)/2; 
    51. 
    
    
    
    
  51.         var TOP = (CLIENT_HEIGHT - _height)/2; 
    52. 
    
    
    
    
  52.         var _top = _config.top||TOP; 
    53. 
    
    
    
    
  53.         var _left = _config.left||LEFT; 
    54. 
    
    
    
    
  54.         isModal = _config.modal; 
    55. 
    
    
    
    
  55.         if(!_config.autoOpen){ 
    56. 
    
    
    
    
  56. //          隐藏 
    57. 
    
    
    
    
  57.             obj.hide(); 
    58. 
    
    
    
    
  58. //          添加样式类 
    59. 
    
    
    
    
  59.             obj.addClass(_clsPrefix+'container') 
    60. 
    
    
    
    
  60.             .css({ 
    61. 
    
    
    
    
  61.                 'top':_top, 
    62. 
    
    
    
    
  62.                 'left':_left, 
    63. 
    
    
    
    
  63.                 'width':_width, 
    64. 
    
    
    
    
  64.                 'height':_height 
    65. 
    
    
    
    
  65.             }); 
    66. 
    
    
    
    
  66. //          定义标题 
    67. 
    
    
    
    
  67.             var title = DOM.create("<div class='"+_clsPrefix+"title'>"+_title+"<a href='javascript:void(0)' class='"+_clsPrefix+"close' title='close'>Xa>div>"); 
    68. 
    
    
    
    
  68.             obj.prepend($(title)); 
    69. 
    
    
    
    
  69. //          判断是否是模式对话框 
    70. 
    
    
    
    
  70.             if(isModal){ 
    71. 
    
    
    
    
  71.                 wrapper = DOM.create("<div class='"+_clsPrefix+"wrapper'>div>"); 
    72. 
    
    
    
    
  72.                 $(wrapper).insertAfter(obj); 
    73. 
    
    
    
    
  73.             } 
    74. 
    
    
    
    
  74. //          委派事件 
    75. 
    
    
    
    
  75.             Event.delegate(obj,'click','.'+_clsPrefix+"close",function(){ 
    76. 
    
    
    
    
  76.                 Popbox.prototype.close(); 
    77. 
    
    
    
    
  77.             }); 
    78. 
    
    
    
    
  78.         } 
    79. 
    
    
    
    
  79.     }; 
    80. 
    
    
    
    
  80.     Popbox.prototype.open = function(){ 
    81. 
    
    
    
    
  81.         if(isModal&&wrapper){ 
    82. 
    
    
    
    
  82.             $(wrapper).css({ 
    83. 
    
    
    
    
  83.                     'width':AVAIL_WIDTH, 
    84. 
    
    
    
    
  84.                     'height':AVAIL_HEIGHT 
    85. 
    
    
    
    
  85.                 }); 
    86. 
    
    
    
    
  86.         } 
    87. 
    
    
    
    
  87.         obj.fadeIn(); 
    88. 
    
    
    
    
  88.     }; 
    89. 
    
    
    
    
  89.     Popbox.prototype.close = function(){ 
    90. 
    
    
    
    
  90.         if(isModal&&wrapper){ 
    91. 
    
    
    
    
  91.             $(wrapper).css({ 
    92. 
    
    
    
    
  92.                     'width':0, 
    93. 
    
    
    
    
  93.                     'height':0 
    94. 
    
    
    
    
  94.                 }); 
    95. 
    
    
    
    
  95.         } 
    96. 
    
    
    
    
  96.         obj.fadeOut(); 
    97. 
    
    
    
    
  97.     }; 
    98. 
    
    
    
    
  98.      
    99. 
    
    
    
    
  99.      
    100. 
    
    
    
    
  100.     return Popbox; 
    101. 
    
    
    
    
  101. },{ requires:["dom","event","../base"]}); 
    102. 
    
    
    
    
  102. script> 
    103. 
    
    
    
    
  103. <script type="text/javascript"> 
    104. 
    
    
    
    
  104. KISSY.ready(function(S){ 
    105. 
    
    
    
    
  105.     var $ = S.all; 
    106. 
    
    
    
    
  106.     var popbox; 
    107. 
    
    
    
    
  107.     S.use("popbox",function(S,PopBox){ 
    108. 
    
    
    
    
  108.          popbox = new PopBox( 
    109. 
    
    
    
    
  109.                 '#demo1',{ 
    110. 
    
    
    
    
  110.                     autoOpen:false, 
    111. 
    
    
    
    
  111.                     modal:true, 
    112. 
    
    
    
    
  112.                     width:800, 
    113. 
    
    
    
    
  113.                     height:500, 
    114. 
    
    
    
    
  114.                     title:'弹出层Demo' 
    115. 
    
    
    
    
  115.                 }); 
    116. 
    
    
    
    
  116.     }); 
    117. 
    
    
    
    
  117.     $('#btn-open').on('click',function(){ 
    118. 
    
    
    
    
  118.         popbox.open(); 
    119. 
    
    
    
    
  119.     }); 
    120. 
    
    
    
    
  120. }); 
    121. 
    
    
    
    
  121. script> 
    122. 
    
    
    
    
  122. <style type="text/css"> 
    123. 
    
    
    
    
  123. .container{ 
    124. 
    
    
    
    
  124.     width:960px; 
    125. 
    
    
    
    
  125.     height:1000px; 
    126. 
    
    
    
    
  126.     margin: 0px auto; 
    127. 
    
    
    
    
  127. } 
    128. 
    
    
    
    
  128. style> 
    129. 
    
    
    
    
  129. head> 
    130. 
    
    
    
    
  130. <body> 
    131. 
    
    
    
    
  131. <div class='container'> 
    132. 
    
    
    
    
  132.     <div id='demo1'> 
    133. 
    
    
    
    
  133.         <iframe  src='http://www.baidu.com' frameborder="0" width="100%" height="480" scrolling="auto"> 
    134. 
    
    
    
    
  134.         iframe> 
    135. 
    
    
    
    
  135.     div>   
    136. 
    
    
    
    
  136.     <button id='btn-open'>打开button> 
    137. 
    
    
    
    
  137. div> 
    138. 
    
    
    
    
  138. body> 
    139. 
    
    
    
    
  139. html> 
    140.