标签：pre osi min ndt 工作 span text isp 遮罩
对网站而言，弹出框是比较常见的。或是给出用户操作提示，或是通过弹出框打开一个小窗口以提示信息，或是给出错误警示等等。
但是由于浏览器自带的弹出窗口alert , confirm , prompt样式比较单调，且不同浏览器有不同的默认样式设置。
所以在日常工作中，给网站做一个自定义的弹出框十分必要。特别是富交互的网站
html部分：
1 <!--修改弹窗--> 2 <div class="pop-alert" id="pop" style="display:none"> 3 <div class="btbox"><a href="javascript:Func.popHide(‘#pop‘)" class="gb">x</a></div> 4 <div class="cont clearfix"> 5 <p class="jx_inf">这是一个提示</p> 6 </div> 7 <div class="an_box"> 8 <a href="javascript:Func.popHide(‘#pop‘)" class="btn-comm-small btn-comm-white btn">确 认</a> 9 </div> 10 </div>
css部分：定义基本样式
1 .pop-alert{width:353px; height:205px;border: 1px solid #d6d8d9;background: #f3f5f7;position:fixed;top:50%;left:50%;margin:-220px 0 0 -370px;outline:none;display:none;z-index:999;} 2 .pop-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);z-index:998;} 3 .btbox{ height:40px;} 4 .btbox sp{font-size: 1.4em;font-weight: bold;color: #fff;line-height: 40px;margin-left: 10px;} 5 .gb{ width:24px; height:24px; display:inline; margin:5px 5px 0 0; color: #909091;text-align: center;position: absolute;top: 0;right: 0;} 6 .gb:hover{ background-position:0 -24px;} 7 .cont{ padding-top:22px; text-align:center;} 8 .cont img,.cont p{ display:inline-block; margin:0 8px; vertical-align:top;} 9 .cont p{ text-align:left;color:#999;min-height: 80px;} 10 .jx_inf{line-height:20px; font-size:14px;text-align: center;} 11 .jx_inf span{ color:#00fb76;} 12 .an_box{ text-align:center; height:32px;} 13 .an_box a{width:100px; height:32px; display:inline-block;font-weight:bold;background:#3898fe;color:#fff; text-align:center; line-height:32px; font-size:14px;border-radius:4px;} 14 .an_box a:hover{ background-color: #58a9ff;}
js部分： 生成行内样式
popShow:function(popBox) { var p=$(popBox); p.show(); p.css({ position: ‘fixed‘, top: ($(window).height() - p.height()) / 2, left: ($(window).width() - p.width()) / 2, marginTop:0, marginLeft:0, zIndex: 1005 }); $(‘.pop-bg‘).show(); $(‘<span class="pop-bg"></span>‘).appendTo("body"); }, popHide:function(popBox) { $(popBox).hide(); $(‘.pop-bg‘).remove(); },
如上所示：css方面,关键的是 1、position:fixed样式，2、然后在定义 top和left 3、z-index的遮罩层的生成
js方面 就是控制 弹出框的显示和隐藏
标签：pre osi min ndt 工作 span text isp 遮罩
原文地址：http://www.cnblogs.com/blog-index/p/6880015.html
