JS编写简单的弹窗插件(含有demo和源码)
2013-12-11 22:30 龙恩0707 阅读(7444) 评论(11) 编辑 收藏 举报最近项目做完了 事情不是很多，今天正好也在调休，所以趁着这个时间研究了一下简易的JS弹窗功能，当然网上这块插件非常多，本人也没有仔细看网上的插件源码 只是凭着日常使用过的弹窗插件有这么多功能 来实现自己的弹窗思路，当然我这个可能实现了基本功能，那么如果想做的更好 更完善需要以后继续优化！如果有不足之处！请大家多多谅解！
由于弹窗大家都知道是个什么样的 所以这次没有做演示效果图！目前测试下：支持IE6+ 火狐 谷歌游览器等。
先来看看此组件的基本配置项：如下：
this.config = { targetCls : '.clickElem', // 点击元素 title : '我是龙恩', // 窗口标题 content : 'text:<p style="width:100px;height:100px">我是龙恩</p>', //content : 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg', // 窗口内容 {text:具体内容 | id:id名 | img:图片链接 | // iframe:src链接} {string} width : 400, // 内容的宽度 height : 300, // 内容的高度 theight : 30, // 标题的高度 默认为30 drag : true, // 是否可以拖动 默认为true time : 3000, // 自动关闭窗口的时间 为空或者'undefined'则不关闭 showBg : true, // 设置是否显示遮罩层 默认为true 遮罩 closable : '#window-close', // 关闭按钮 bgColor : '#000', // 默认颜色 opacity : 0.5, // 默认透明度 position : { x: 0, y: 0 //默认等于0 居中 }, zIndex : 10000, isScroll : true, //默认情况下 窗口随着滚动而滚动 isResize : true, // 默认情况下 随着窗口缩放而缩放 callback : null //弹窗显示后回调函数 };
1. 支持配置标题 内容，标题的高度 内容的宽度和高度 窗口是否可以拖动 弹窗后是否自动关闭 是否显示遮罩背景 颜色 及 透明度的配置，及窗口的展示位置 默认x轴0 y轴0是居中对齐，也可以自己配置x轴 y轴的位置 但是要注意是相对于父元素那个X轴 y轴 如果不指定父元素的相对定位 那么默认情况下会相对于document的。当然窗口内容的宽度和高度不建议超过游览器的一屏幕的宽度和高度 尽量小于第一屏的宽度和高度 因为我以前用别人的弹窗插件会存在点击关闭按钮后 由于游览器有滚动条 点击后触发滚动条事件 导致关闭不了窗口 如果内容宽度和高度很大的话 也没有关系 窗口自动会出现滚动条的。
2. 窗口的内容配置项 支持四种 1.text（文本） 可以如下配置 text:<p style="width:100px;height:100px">我是龙恩</p>
2. img（图片） 可以如下配置 img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg
3. id（id节点） 可以如下配置 'id:XX'
4. iframe 可以如下配置 'iframe:http://www.baidu.com(iframe地址)'
3. 提供弹窗后回调函数： 如弹窗后可以做自己想做的事情。
所以弹窗组件也没有什么好说的 当然如果要用到自己的项目中 css样式可以自己重新写的，我JS并没有写死掉 只是完成JS基本弹窗业务功能。
HTML代码如下：
<div class="clickElem" style="margin-top:10px;">我是龙恩 请点击我</div> <div class="clickElem" style="margin-top:10px;">我是龙恩 请点击我</div>
CSS代码如下：
<style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif;} label{cursor:pointer;} #window-box{border:5px solid #E9F3FD;background:#FFF;} .windown-title{position:relative;height:30px;border:1px solid #A6C9E1;overflow:hidden;background:url(images/tipbg.png) 0 0 repeat-x;} .window-title h2{padding-left:5px;font-size:14px;color:#666;} #window-close{position:absolute;right:10px;top:8px;width:10px;height:16px;text-indent:-10em;overflow:hidden;background:url(images/tipbg.png) 100% -49px no-repeat;cursor:pointer;} #window-content-border{padding:5px 0 5px 5px;} </style>
JS代码如下：
/** * 编写JS弹窗组件 * @date 2013-12-10 * @author tugenhua * @email 879083421@qq.com */ function Overlay(options){ this.config = { targetCls : '.clickElem', // 点击元素 title : '我是龙恩', // 窗口标题 content : 'text:<p style="width:100px;height:100px">我是龙恩</p>', //content : 'img:http://gtms01.alicdn.com/tps/i1/T1USkqFc0dXXb5rXb6-1060-300.jpg', // 窗口内容 {text:具体内容 | id:id名 | img:图片链接 | // iframe:src链接} {string} width : 400, // 内容的宽度 height : 300, // 内容的高度 theight : 30, // 标题的高度 默认为30 drag : true, // 是否可以拖动 默认为true time : 3000, // 自动关闭窗口的时间 为空或者'undefined'则不关闭 showBg : true, // 设置是否显示遮罩层 默认为true 遮罩 closable : '#window-close', // 关闭按钮 bgColor : '#000', // 默认颜色 opacity : 0.5, // 默认透明度 position : { x: 0, y: 0 //默认等于0 居中 }, zIndex : 10000, isScroll : true, //默认情况下 窗口随着滚动而滚动 isResize : true, // 默认情况下 随着窗口缩放而缩放 callback : null //弹窗显示后回调函数 }; this.cache = { isrender : true, // 弹窗html结构只渲染一次 isshow : false, // 窗口是否已经显示出来 moveable : false }; this.init(options); } Overlay.prototype = { constructor: Overlay, init: function(options){ this.config = $.extend(this.config,options || {}); var self = this, _config = self.config, _cache = self.cache; $(_config.targetCls).each(function(index,item){ $(item).unbind('click'); $(item).bind('click',function(){ // 渲染弹窗HTML结构 self._renderHTML(); // 窗口移动 self._windowMove(); }); }); // 窗口缩放 self._windowResize('#window-box'); // 窗口随着滚动条一起滚动 self._windowIsScroll('#window-box'); }, /* * 渲染弹窗HTML结构 */ _renderHTML: function(){ var self = this, _config = self.config, _cache = self.cache; var html =''; if(_cache.isrender) { html+= '<div id="windowbg" style="display:none;position:absolute;top:0;left:0;"></div>' + '<div id="window-box" style="display:none;overflow:hidden;">' + '<div class="window-title"><h2></h2><span id="window-close">关闭</span></div>'+ '<div id="window-content-border"><div id="window-content"></div></div>' + '</div>'; $('body').append(html); $("#windowbg").css('z-index',_config.zIndex); $('#window-content-border').css({'width':_config.width + 'px','height':_config.height + 'px','overflow':'auto'}); $('.window-title h2').html(_config.title); $('.window-title').css({'height':_config.theight + 'px','width':_config.width,'overflow':'hidden'}); _cache.isrender = false; // 判断传递进来的内容格式 self._contentType(); if(_config.showBg) { // 渲染背景宽度和高度 self._renderDocHeight(); $("#windowbg").show(); self.show(); }else { $("#windowbg").hide(); self.show(); } self._showDialogPosition("#window-box"); }else { // 如果弹窗已经创建出来的话, 只是隐藏掉了, 那么我们显示出来 self.show(); $("#windowbg").animate({"opacity":_config.opacity},'normal'); if(_config.showBg) { $("#windowbg").show(); } self._showDialogPosition("#window-box"); } $(_config.closable).unbind('click'); $(_config.closable).bind('click',function(){ // 点击关闭按钮 self._closed(); }); // 渲染后 回调函数 _config.callback && $.isFunction(_config.callback) && _config.callback(); }, /** * 显示弹窗 */ show: function(){ var self = this, _config = self.config, _cache = self.cache; $("#window-box") && $("#window-box").show(); _cache.isshow = true; if(_config.time == '' || typeof _config.time == 'undefined') { return; }else { t && clearTimeout(t); var t = setTimeout(function(){ self._closed(); },_config.time); } }, /** * 隐藏弹窗 */ hide: function(){ var self = this, _cache = self.cache; $("#window-box") && $("#window-box").hide(); _cache.isshow = false; }, /** * 判断传进来的内容类型 */ _contentType: function(){ var self = this, _config = self.config, _cache = self.cache; var contentType = _config.content.substring(0,_config.content.indexOf(":")), content = _config.content.substring(_config.content.indexOf(":")+1,_config.content.length); switch(contentType) { case 'text': $('#window-content').html(content); break; case 'id': $('#window-content').html($('#'+content).html()); break; case 'img': $('#window-content').html("<img src='"+content+"' class='window-img'/>"); break; case 'iframe': $('#window-content').html('<iframe src="'+content+'" width="100%" height="100%" scrolling="yes" frameborder="0"></iframe>'); $("#window-content-border").css({'overflow':'visible'}); break; } }, /** * 点击关闭按钮 */ _closed: function(){ var self = this, _config = self.config, _cache = self.cache; if(_cache.isshow) { self.hide(); } if(_config.showBg) { $("#windowbg").hide(); } $("#windowbg").animate({"opacity":0},'normal'); }, /** * 显示弹窗的位置 默认情况下居中 */ _showDialogPosition: function(container) { var self = this, _config = self.config, _cache = self.cache; $(container).css({'position':'absolute','z-index':_config.zIndex + 1}); var offsetTop = Math.floor(($(window).height() - $(container).height())/2) + $(document).scrollTop(), offsetLeft = Math.floor(($(window).width() - $(container).width())/2) + $(document).scrollLeft(); // 判断x,y位置默认是不是等于0 如是的话 居中 否则 根据传进来的位置重新定位 if(0 === _config.position.x && 0 === _config.position.y){ $(container).offset({'top':offsetTop, 'left':offsetLeft}); }else{ $(container).offset({'top':_config.position.y,'left':_config.position.x}); } }, /** * 渲染底部背景的高度 */ _renderDocHeight: function(){ var self = this, _config = self.config; $("#windowbg").animate({"opacity":_config.opacity},'normal'); if(self._isIE6()){ $("#windowbg").css({'background':'#fff','height':$(document).height()+'px','width':$(document).width()+"px"}); }else { $("#windowbg").css({'background':_config.bgColor,'height':$(document).height()+'px','width':$(document).width()+"px"}); } }, /* * 窗口缩放 */ _windowResize: function(elem){ var self = this, _config = self.config; $(window).unbind('resize'); $(window).bind('resize',function(){ t && clearTimeout(t); var t = setTimeout(function(){ if(_config.isResize){ self._showDialogPosition(elem); self._renderDocHeight(); } },200); }); }, /** * 窗口是否随着滚动条一起滚动 */ _windowIsScroll: function(elem){ var self = this, _config = self.config; $(window).unbind('scroll'); $(window).bind('scroll',function(){ t && clearTimeout(t); var t = setTimeout(function(){ if(_config.isScroll){ self._showDialogPosition(elem); self._renderDocHeight(); } },200); }); }, /** * 窗口移动 */ _windowMove: function(){ var self = this, _config = self.config, _cache = self.cache; var mouseX = 0, mouseY = 0; $('.window-title').mouseenter(function(){ $(this).css({'cursor':'move'}); }); $('.window-title').mouseleave(function(){ $(this).css({'cursor':'default'}); }); $('.window-title').mousedown(function(e){ _cache.moveable = true; mouseX = e.clientX - $(this).offset().left; mouseY = e.clientY - $(this).offset().top; $('.window-title').css({'cursor':'move'}); }); $(document).mouseup(function(){ if(!_cache.moveable) { return; } $('.window-title').css({'cursor':'default'}); _cache.moveable = false; }); $('#window-box').mousemove(function(e){ if(_cache.moveable) { $(this).css({'left':e.clientX - mouseX + 'px','top':e.clientY - mouseY + 'px'}); } }); }, /* * 判断是否是IE6游览器 * @return {Boolean} */ _isIE6: function(){ return navigator.userAgent.match(/MSIE 6.0/)!= null; } };
