自定義彈出框效果

對網站而言，彈出框是比較常見的。或是給出用戶操做提示，或是經過彈出框打開一個小窗口以提示信息，或是給出錯誤警示等等。

可是因爲瀏覽器自帶的彈出窗口alert , confirm , prompt樣式比較單調，且不一樣瀏覽器有不一樣的默認樣式設置。

因此在平常工做中，給網站作一個自定義的彈出框十分必要。特別是富交互的網站

 

1、提示框

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方面,關鍵的是 一、position:fixed樣式，二、而後在定義 top和left 三、z-index的遮罩層的生成  

　　　　　 js方面 就是控制 彈出框的顯示和隱藏