1 /** 2 * 对话框 3 * @constructor 4 * @author putaoshu@126.com 5 * @date 2012-03-13 6 * @param {Object} options 组件配置 7 8 * @param {Object} options.message 主对象 9 * @param {Boolean} options.mask true 是否有遮罩层 10 * @param {Number} options.opacity 0.15 遮罩层透明度 11 * @todo {Boolean} options.drag false 12 * @param {String} options.maskClass vuiDialogMask 遮罩层样式 13 * @param {String} options.dialogClass vuiDialog 对话框主体样式 14 * @param {Object} options.close true 是否采用vui.undialog关闭浮层 15 * @param {Boolean} options.maskIframe false 遮罩层用iframe做底 16 * @param {Boolean} options.appendType true true 直接先append到body 17 * @param {Object} options.stick null 需要粘在某个元素上 18 * @param {Boolean} options.autoClientX false 浮层宽度为当前窗口宽度 19 * @param {Boolean} options.autoClientY false 浮层高度为当前窗口高度 20 * @param {Boolean} options.fixed true 浮层是否fixed 21 22 * @param {Object} options.css 主体样式配置 23 * @param {Number} options.css.width null 主体宽度 24 * @param {Number} options.css.height null 主体高度 25 * @param {Number} options.css.top null 主体top 26 * @param {Number} options.css.left null 主体left 27 * @param {Number} options.css.zIndex 9998 主体zIndex 28 29 * @param {Function} callback 回调函数 30 * @example 31 vui.dialog({message:$('#dialog')}); 32 33 vui.dialog({ 34 message:"<h2 >标题 </h2>", 35 css:{ 36 top:'10px', 37 left:'20px', 38 width:'300px', 39 zIndex:'10000' 40 } 41 }); 42 43 vui.dialog({ 44 message:$('#userGuide'), 45 opacity:0.5, 46 stick: $('#picModeOpt'), //粘到某个元素上 47 css:{ 48 top : -17, 49 left : -365, 50 zIndex:10 51 } 52 }); 53 54 * @2012-05-28 浮层宽度为当前窗口宽度 autoClientX:true 55 * @todo 拖动; 56 */ 57 vui.dialog = function(options,callback){ 58 var $this = ''; 59 options = $.extend({ 60 message : null, 61 mask : true, 62 opacity : 0.15, 63 drag : false, 64 maskClass:'vuiDialogMask', 65 dialogClass:'vuiDialog', 66 close:true,//是否采用vui.undialog关闭浮层 67 maskIframe:false, 68 appendType:true,//true:直接先append到body 69 stick:null,//需要粘在某个元素上 70 autoClientX:false,//浮层宽度为当前窗口宽度 71 autoClientY:false,//浮层高度为当前窗口高度 72 fixed:true, //浮层fixed与否 73 css : { 74 width : null, 75 height :null, 76 top : null, 77 left : null, 78 zIndex:9998 79 } 80 },options); 81 82 //插入模式 83 var insideTag = vui.isObject(options.message); 84 var stickDom = options.stick; 85 86 //加遮照层 87 var maskObj; 88 89 if (options.mask){ 90 maskObj = $(document.createElement("div")); 91 maskObj.attr('class',options.maskClass); 92 maskObj.addClass('vuiMaskLayer'); 93 maskObj.css({ 94 position:"absolute",zIndex:options.css.zIndex,left:0,top:0,opacity:options.opacity,backgroundColor:"#000", 95 width:vui.pageSize().docWidth, 96 height:vui.pageSize().docHeight 97 }); 98 if (!$('.'+options.maskClass)[0]) maskObj.appendTo('body'); 99 100 //ie6 select bug 101 if (vui.browser.ie6 || options.maskIframe){ 102 maskObj.append('<iframe src="javascript:;" class="vuiSelectBug" frameBorder="0" style="width:100%;height:100%;position:absolute;z-index:'+(options.css.zIndex+1)+';opacity:0;filter:alpha(opacity=0);top:0;left:0;">'); 103 } 104 105 //自适应窗口 106 $(window).resize(function(){ 107 var currentCSS = { 108 width:vui.pageSize().docWidth, 109 height:vui.pageSize().docHeight 110 } 111 $('.'+options.maskClass).css(currentCSS); 112 }); 113 } 114 115 //开始始 appendTo body 116 if(insideTag){ 117 if (options.appendType){ 118 options.message.appendTo('body'); 119 } 120 options.message.css({top:0,left:0}) 121 } 122 123 //垂直距中 124 var dialogObj = $(document.createElement("div")); 125 126 if (vui.isString(options.message)){ 127 dialogObj.append(options.message); 128 $this = dialogObj.children().first(); 129 }else if(insideTag){ 130 $this = options.message; 131 }else{ 132 dialogObj.append($this); 133 } 134 135 //兼容IE6 136 $this.css({'float':'left',position:'',top:'',bottom:'',left:'',right:''}); 137 138 autoClient(); 139 dialogObj.attr('class',options.dialogClass); 140 if(!insideTag) dialogObj.appendTo('body'); 141 142 if (insideTag) dialogObj = options.message; 143 144 var dialogObjCss = { 145 position: 'absolute' , 146 zIndex:options.css.zIndex+2, 147 display:"block" 148 } 149 150 //setStyle 151 function setStyle(){ 152 autoClient(); 153 var tag = vui.browser.ie6 ; 154 var currentCSS = { 155 position: tag ? 'absolute' : "fixed" , 156 top:(options.css.top == null) ? ($(window).height() - $this.height() ) / 2 + (tag ? $(window).scrollTop() :0 ) : options.css.top, 157 left:(options.css.left == null) ? ($(window).width() - $this.width() ) / 2 + (tag ? $(window).scrollLeft() :0 ) : options.css.left 158 } 159 160 if (!options.fixed){ 161 currentCSS.position = 'absolute' ; 162 } 163 dialogObj.css(currentCSS); 164 } 165 166 //窗口自适应的dom 167 if (stickDom){ 168 dialogObjCss.left = stickDom.offset().left+options.css.left; 169 dialogObjCss.top = stickDom.offset().top+options.css.top; 170 } 171 172 //浮层宽和高为当前窗口宽和高 173 function autoClient(){ 174 if (options.autoClientX){ 175 $this.css({width:$(window).width()}); 176 } 177 if (options.autoClientY){ 178 $this.css({height:$(window).height()}); 179 } 180 } 181 182 //样式最终设定 183 dialogObj.css(dialogObjCss); 184 if (!stickDom) setStyle(); 185 186 187 //fixed (IE6模拟) 188 if (vui.browser.ie6 && !stickDom){ 189 if (options.fixed){ 190 $(window).bind('scroll',function(){ 191 setStyle(); 192 }); 193 } 194 } 195 196 //窗口自适应 197 $(window).resize(function(){ 198 if (stickDom){ 199 dialogObj.css({ 200 left : stickDom.offset().left+options.css.left, 201 top : stickDom.offset().top+options.css.top 202 }); 203 }else{ 204 setStyle(); 205 } 206 }); 207 208 //默认.dialogclose可以移除浮层 209 $('.dialogclose',dialogObj).click(function(){ 210 dialogObj.remove(); 211 maskObj.remove(); 212 }); 213 214 $(window).data('dialog.options.close',options.close); 215 $(window).data('dialog.maskObj',maskObj); 216 $(window).data('dialog.dialogObj',dialogObj); 217 218 if (callback){ 219 callback(); 220 } 221 222 if (options.close){ 223 vui.preventScroll.init(); 224 } 225 } 226 227 //兼容unblockUI 228 vui.undialog = function(){ 229 if ($(window).data('dialog.maskObj') && ( $(window).data('dialog.options.close')==true ) ){ 230 $(window).data('dialog.maskObj').remove(); 231 $(window).data('dialog.dialogObj').remove(); 232 var maskLayer = $('.vuiMaskLayer:last'); 233 if (!maskLayer.is(':visible') || maskLayer.css('visibility')=='hidden'){ 234 vui.preventScroll.destroy(); 235 } 236 } 237 }; 238 239