自定义弹出框效果

对网站而言，弹出框是比较常见的。或是给出用户操作提示，或是通过弹出框打开一个小窗口以提示信息，或是给出错误警示等等。

但是由于浏览器自带的弹出窗口alert , confirm , prompt样式比较单调，且不同浏览器有不同的默认样式设置。

所以在日常工作中，给网站做一个自定义的弹出框十分必要。特别是富交互的网站

 

一、提示框

html部分：

<!--修改弹窗-->
<div class="pop-alert" id="pop" style="display:none">
    <div class="btbox"><a href="javascript:Func.popHide('#pop')" class="gb">x</a></div>
    <div class="cont clearfix">
        <p class="jx_inf">这是一个提示</p>
    </div>
    <div class="an_box">
        <a href="javascript:Func.popHide('#pop')" class="btn-comm-small btn-comm-white btn">确 认</a>
    </div>
</div>

css部分：定义基本样式

 .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;}
 .pop-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);z-index:998;}
 .btbox{ height:40px;}
 .btbox sp{font-size: 1.4em;font-weight: bold;color: #fff;line-height: 40px;margin-left: 10px;}
 .gb{ width:24px; height:24px; display:inline; margin:5px 5px 0 0; color: #909091;text-align: center;position: absolute;top: 0;right: 0;}
 .gb:hover{ background-position:0 -24px;}
 .cont{ padding-top:22px; text-align:center;}
 .cont img,.cont p{ display:inline-block; margin:0 8px; vertical-align:top;}
 .cont p{ text-align:left;color:#999;min-height: 80px;}
 .jx_inf{line-height:20px; font-size:14px;text-align: center;}
 .jx_inf span{ color:#00fb76;}
 .an_box{ text-align:center; height:32px;}
 .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;}
 .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方面 就是控制 弹出框的显示和隐藏