前段时间闲来没事就自己造了个轮子，写了个弹框插件。虽然还有很多待完善的，但是感觉够用很多场景了，所以就拿出来分享分享
我自己给它取名叫Lee_popup（前段时间误删了，现在重新发布下）
这是HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/lee_popup.js"></script> <link rel="stylesheet" href="css/lee_popup.css"> </head> <body style="height:1500px;"> <input type="button" style="margin-top:500px;" οnclick="wspopup();" name="" value="点我弹出"> <!-- 遮罩层 --> <div class="ws-mask" style="display:none;"></div> <!-- 弹出层 --> <div class="ws-popup" style="display:none;"> <form action="javascript:;" method="post" accept-charset="utf-8"> <div class="popup-top"> <span>添加项目</span><span class="popup-close" οnclick="wsclose();">×</span> </div> <div class="popup-list"> <span>项目名称</span><input class="popup-list-inp" type="text" name="" value="" placeholder=""> </div> <div class="popup-list"> <span>项目价格</span><input class="popup-list-inp" type="text" name="" value="" placeholder=""> </div> <div class="popup-list"> <span>项目单位</span><input class="popup-list-inp" type="text" name="" value="" placeholder="如:天、次..."> </div> <div class="popup-list"> <input class="popup-list-btn" type="submit" name="" value="提交"> </div> </form> </div> </body> </html>这是css部分
*{margin:0; padding:0;} .ws-mask{width:100%; height:100%; background:rgba(0,0,0,0.2); position: fixed; top: 0; z-index: 9999;} .ws-popup{width:400px; height:auto; border:5px solid #b9b9b9; background:#fff; z-index:10000; padding-bottom: 15px; position: absolute; animation: fadeInDown .8s 0s ease both;} .popup-top{width:100%; height:50px; font:18px/50px 'microsoft yahei'; color:#4b4b4b; text-align: center; background:#f2f2f2; position: relative;} .popup-list{width:370px; height:45px; margin:20px 15px 0 15px; text-align: center;} .popup-list span{font:14px/45px 'microsoft yahei'; color:#4b4b4b; padding:0 10px;} .popup-list-inp{width:280px; height:43px; border:1px solid #ccc; padding:0 5px;} .popup-list-btn{width:160px; height:40px; border:0; background:#f21c26; font: 14px/40px 'microsoft yahei'; color:#fff; text-align: center; margin:0 auto;} .popup-list-btn:hover{background:#e4271b; transition-delay:0.2s; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; cursor:pointer;} .popup-close{width:30px; height:30px; font:26px/30px 'microsoft yahei'; color:#4b4b4b; background:#f2f2f2; position: absolute; top: 10px; right:10px; cursor:pointer;} .popup-close:hover{background:#00b19d; transition-delay:0.2s; transition:all 0.4s; -moz-transition:all 0.4s; -webkit-transition:all 0.4s; -o-transition:all 0.4s; color:#fff;} 这是js部分 //显示弹出层 function wspopup(){ document.documentElement.style.overflow='hidden'; //禁止浏览器滚动 var bodyHeight = document.documentElement.clientHeight + document.body.scrollTop; //获取浏览器可视区域高度 实际高度+下拉的高度 var bodyWidth = document.documentElement.clientWidth; //获取浏览器可视区域宽度 var popupHeight = $('.ws-popup').height(); //获取弹出层高度 var popupWidth = $('.ws-popup').width(); //获取弹出层宽度 var tolHeight = (bodyHeight + document.documentElement.scrollTop - popupHeight) / 2; //计算弹出层上下偏移量 var tolWidth = (bodyWidth - popupWidth) / 2; //计算弹出层左右偏移量 $('.ws-mask').height(bodyHeight); //设置遮罩层高度 $('.ws-popup').css({'top':tolHeight,'left':tolWidth}) //设置弹出层偏移位置（必须先在CSS设置position值） $('.ws-mask').show(); $('.ws-popup').show(); } //关闭弹出层 function wsclose(){ document.documentElement.style.overflow='auto'; //恢复浏览器滚动 $('.ws-mask').hide(); $('.ws-popup').hide(); } 用的时候导入一个jquery文件就可以了或者用百度的静态资源库 http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
//---------------------华丽的分割线--------------------
//-------------------2017/05/20更新--------------------
在520这美好的节日里，大家都在成双成对的happy的时候，我。。。。我当然还在加班啦 - _ -!
来吧，上代码。在前几天用的时候发现一个页面多次调用这个弹框的时候，弹出层、遮罩层会重复调用，这个用的就很不爽了，由于是自己写的，只能默默的鄙视一下自己。用的不爽，当然就要往爽了用，所以就修改了下js代码。
//显示弹出层 function wspopup(){ modelFixed('.ws-popup'); } //关闭弹出层 function wsclose(){ modelClose('.ws-popup'); } function modelClose(Close){ document.documentElement.style.overflow='auto'; //恢复浏览器滚动 $('.ws-mask').hide(); $(Close).hide(); } function modelFixed(model){ document.documentElement.style.overflow='hidden'; //禁止浏览器滚动 var bodyHeight = document.documentElement.clientHeight + document.body.scrollTop; //获取浏览器可视区域高度 实际高度+下拉的高度 var bodyWidth = document.documentElement.clientWidth; //获取浏览器可视区域宽度 var popupHeight = $(model).height(); //获取弹出层高度 var popupWidth = $(model).width(); //获取弹出层宽度 var tolHeight = (bodyHeight + document.body.scrollTop - popupHeight) / 2; //计算弹出层上下偏移量 var tolWidth = (bodyWidth - popupWidth) / 2; //计算弹出层左右偏移量 $('.ws-mask').height(bodyHeight); //设置遮罩层高度 $(model).css({'top':tolHeight,'left':tolWidth}) //设置弹出层偏移位置（必须先在CSS设置position值） $('.ws-mask').show(); $(model).show(); }
主要只是封装了一下弹出层代码，能够复用，避免代码冗余。
最后祝大家520快乐，我默默的敲代码去了。。。持续更新中...
