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