- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gbk">
- <title>kissy彈窗</title>
- <style type="text/css">
- .ks-popbox-container{position:absolute;z-index:200;background:#fff;border:5px solid #ccc;}
- .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;}
- .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;}
- .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;}
- </style>
- <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>
- <script type="text/javascript">
- /**
- * 彈窗
- * @author huxiaoqi
- */
- KISSY.add("popbox",function(S, DOM, Event){
- var obj = null;
- var $ = S.all;
- var CLIENT_WIDTH = document.body.clientWidth;
- var CLIENT_HEIGHT = document.body.clientHeight;
- var AVAIL_WIDTH = window.screen.availWidth;
- var AVAIL_HEIGHT = window.screen.availHeight;
- var isModal = null;
- var wrapper = null;
- function Popbox(container,config){
- obj = $(container);
- var self = this;
- if(!self instanceof Popbox){
- return new Popbox(container,config);
- }
- this.init(this.Config, config);
- }
- Popbox.prototype.Config = {
- autoOpen:true,
- width:400,
- height:240,
- modal:false,
- title:'this is a dialog',
- clsPrefix:'ks-popbox-'
- };
- Popbox.prototype.init = function(Config,config){
- // 設置初始屬性
- var _config = S.mix(Config,config);
- var _title = _config.title;
- var _clsPrefix = _config.clsPrefix;
- var _width = _config.width;
- var _height = _config.height;
- var LEFT = (CLIENT_WIDTH - _width)/2;
- var TOP = (CLIENT_HEIGHT - _height)/2;
- var _top = _config.top||TOP;
- var _left = _config.left||LEFT;
- isModal = _config.modal;
- if(!_config.autoOpen){
- // 隱藏
- obj.hide();
- // 添加樣式類
- obj.addClass(_clsPrefix+'container')
- .css({
- 'top':_top,
- 'left':_left,
- 'width':_width,
- 'height':_height
- });
- // 定義標題
- var title = DOM.create("<div class='"+_clsPrefix+"title'>"+_title+"<a href='javascript:void(0)' class='"+_clsPrefix+"close' title='close'>X</a></div>");
- obj.prepend($(title));
- // 判斷是否是模式對話框
- if(isModal){
- wrapper = DOM.create("<div class='"+_clsPrefix+"wrapper'></div>");
- $(wrapper).insertAfter(obj);
- }
- // 委派事件
- Event.delegate(obj,'click','.'+_clsPrefix+"close",function(){
- Popbox.prototype.close();
- });
- }
- };
- Popbox.prototype.open = function(){
- if(isModal&&wrapper){
- $(wrapper).css({
- 'width':AVAIL_WIDTH,
- 'height':AVAIL_HEIGHT
- });
- }
- obj.fadeIn();
- };
- Popbox.prototype.close = function(){
- if(isModal&&wrapper){
- $(wrapper).css({
- 'width':0,
- 'height':0
- });
- }
- obj.fadeOut();
- };
- return Popbox;
- },{ requires:["dom","event","../base"]});
- </script>
- <script type="text/javascript">
- KISSY.ready(function(S){
- var $ = S.all;
- var popbox;
- S.use("popbox",function(S,PopBox){
- popbox = new PopBox(
- '#demo1',{
- autoOpen:false,
- modal:true,
- width:800,
- height:500,
- title:'彈出層Demo'
- });
- });
- $('#btn-open').on('click',function(){
- popbox.open();
- });
- });
- </script>
- <style type="text/css">
- .container{
- width:960px;
- height:1000px;
- margin: 0px auto;
- }
- </style>
- </head>
- <body>
- <div class='container'>
- <div id='demo1'>
- <iframe src='http://www.baidu.com' frameborder="0" width="100%" height="480" scrolling="auto">
- </iframe>
- </div>
- <button id='btn-open'>打開</button>
- </div>
- </body>
- </html>