首页 > 代码库 > 自定义弹出框效果

自定义弹出框效果

2024-09-23 11:57:08   215人阅读

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

但是由于浏览器自带的弹出窗口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方面 就是控制 弹出框的显示和隐藏

 

自定义弹出框效果


联系
我们