[JS 最简单简洁的插件] 对话框
来源：互联网 发布：js验证11位手机号码 编辑：程序博客网 时间：2024/06/07 01:52
<!doctype html><html><head> <meta charset='utf-8'> <title></title> <style></style> <script src='http://code.jquery.com/jquery.js'></script></head><body><script>(function($){ $.MBox = { options : {}, // 参数: 支持 width/height/title html : '', // 弹层的内容 // 参数设置 setting : function(options){ var defaults = { width : 800 , height : 500 , title : '窗口' , boxName : 'mxx_box' , overlayName : 'mxx_overlay' }; this.options = $.extend(defaults,options); } , // 遮罩层 createOverlay : function(){ if (!$('#'+this.options.overlayName).size()) { $('<div id="'+this.options.overlayName+'"></div>').prependTo($('body')); $('#'+this.options.overlayName).css({ width: '100%', backgroundColor: '#000', opacity: 0.4, position: 'absolute', left: 0, top: 0, zIndex: 99 }).height($(document).height()); } } , // 内容 createBody : function(){ var idName = ''; var html = ''; if(this.options.id != undefined){ idName = this.options.id.substr(1); html += '<div id="'+idName+'">'+$(this.options.id).html()+'</div>'; }else if(this.options.iframe != undefined){ idName = 'mxx_iframe_id_' + Math.floor(Math.random()*1000); html += '<iframe id="'+idName+'" src="'+this.options.iframe+'"></iframe>'; } return html; }, // 层html createLayer : function(content){ var html = '<div class="'+this.options.boxName+'">'; html += '<div style="background:#EFEFEF;height:33px;line-height:36px;border-bottom:1px solid #D0D0D0;padding-left:9px;position:relative">'; html += '<span style="font-size:14px;font-weight:bold;color:#666;">'+this.options.title+'</span>'; html += '<img onclick="$(this).parents(\'.'+this.options.boxName+'\').remove();$(\'#'+this.options.overlayName+'\').remove();" src="https://cdn1.iconfinder.com/data/icons/customicondesign-mini-lightcolour-png/16/Close.png" style="cursor:pointer;position:absolute;top:9px;right:9px;" />'; html += '</div>'; html += content ; html += '</div>'; return html; }, // 样式 setStyle : function(){ $('.'+this.options.boxName).css({ backgroundColor:'#787878', padding:'6px 6px 3px 6px', borderRadius:'8px', zIndex:100, width:this.options.width, height:this.options.height }).center(); // iframe元素样式 $('.'+this.options.boxName+' iframe').css({ width:this.options.width-18, height:this.options.height-56, background:'#fff', padding:'9px', border:'none' }); // id元素样式 $('.'+this.options.boxName+' '+this.options.id).css({ width:this.options.width-18, height:this.options.height-56, background:'#fff', padding:'9px' }); }, open : function(options){ this.setting(options); this.createOverlay(); this.html = this.createBody(); this.html = this.createLayer(this.html); $(this.html).prependTo($('body')); this.setStyle(); } }// })(jQuery);jQuery.fn.center = function () { this.css("position","fixed"); this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); return this;}</script><a href='javascript:;' onclick="$.MBox.open({id:'#i',title:'哈哈哈'})">打开(页内元素)</a><br /><br /><a href='javascript:;' onclick="$.MBox.open({iframe:'http://www.csdn.net/',width:'600',height:'400',title:'CSDN怎么回事呢'})">打开(iframe形式)</a><div id='i' style='display:none'><img src='http://drmcmm.baidu.com/media/id=PHcYnW6dP1R&gp=403&time=nHn1nH04nHfzPf.jpg' /></div></body></html>
