html+css+js实现弹出框+遮罩层

最新推荐文章于 2024-04-08 14:07:57 发布

置顶 yy839126257

最新推荐文章于 2024-04-08 14:07:57 发布

阅读量9k

点赞数 1

分类专栏： web前端文章标签：弹出框遮罩层javascript

本文链接：https://blog.csdn.net/yy839126257/article/details/45096957

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近看到好多童鞋都在找弹出框和遮罩层的实现。

先来说遮罩层是个神马？

其实就是你弹出个东西，然后其他地方变黑了一点。就像遮住了其他地方一样。

那么实现原理呢？

就是设置一个div，宽度，高度是屏幕视口那个大（当然，如果你的document超出了window的大小，那么设置的时候最好还是用document），设置一个 z-index 属性，让它在弹出框下面，在其他地方的上面。原理就是这样啦！

话不多说，接下来上代码：

html：

<!DOCTYPE html>
<html>
<head lang="zh-CH">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,init-scale=1">
    <title></title>
    <style>
        *{
            margin:0;padding: 0;font-size: 16px;
        }
        .pop{
            position: fixed;
            display: none;
            border-radius: 10px;
            background-color: #fff;
            z-index: 200;
            width:240px;
            height:500px;
            border:1px solid #CACACA;
            font:1rem "微软雅黑";
        }
        .pop .title{
            width:240px;
            height:440px;
            line-height: 440px;
            text-align: center;
            border-bottom:1px solid #CACACA;
        }
        .pop .btn{
            text-align: center;
            width: 49%;
            height: 60px;
            line-height: 60px;
            float:left;
            color: #2B8AFB;
        }
        #btn-left{
            border-right:1px solid #CACACA;
        }
    </style>
</head>
<body>
<button id="btn1">弹出对话框</button>


<div id="container"></div>

    <script src="jquery.min.js"></script>
    <script src="pop.js"></script>
    <script>
      var text = '<div id="pop" class="pop"><div class="title" id="title">'+"弹出框"
          +'</div><div class="btn" id="btn-left">'+'确定'+'</div><div class="btn" id="btn-right" οnclick="cancel(this)">'+'取消'+'</div></div>';

      $("#btn1").click(function(){
        //这里设置的两个数值是 pop 的宽度和高度，设置是为了第一次弹出时显示在正中。
        openPop("#container","#pop",240,500,text);
      });

      function cancel(){
        $("#container").empty();
      }
    </script>
</body>
</html>

js：pop.js

/**
* function: 产生弹出框
* author: 杨勇
* time: 2015-4-17
* describe: 依赖jquery
*/
var winWidth,
winHeight,
docWidth,
docHeight,
popWidth,
popHeight,
popTop,
popLeft,
parentId,
popId,
text;

/**
* 创建pop
* @param parentId：存放弹出框的容器ID，里面不能包含任何代码，包括空格，换行，注释等。
* @param popId：弹出框的ID。
* @param popWidth：pop框的宽度
* @param popHeight：pop框的高度
* @param popHeight：pop框的具体html代码
*/
function openPop(parentId, popId, popWidth, popHeight,text){
this.parentId = parentId;
this.popId = popId;
this.text = text;
this.popWidth = popWidth;
this.popHeight = popHeight;
setPopPosition();
createPop(parentId, popId);
}

/**
* 设置弹出框位置，这里为屏幕正中。
* @param pop
* @param popWidth
* @param popHeight
*/
function setPopPosition(){
winWidth = $(window).width();
winHeight = $(window).height();
docWidth = $(document).width();
docHeight = $(document).height();
popTop = (winHeight - popHeight)/2;
popLeft = (winWidth - popWidth)/2;
}

function createPop(parentId,popId){
var str = '<div class="yy-cover" style="background-color: rgba(0,0,0,0.3);z-index: 100;display: none;position: absolute;top:0;left: 0;"></div>'+ text;
$(parentId).html(str);
$(".yy-cover").css({"display":"block","width":winWidth + "px","height":docHeight + "px"});
$(popId).css({"display":"block","top": popTop + "px","left":popLeft + "px"});
}

/**
* 改变窗口大小时重置pop框的位置
*/
$(window).resize(function(){
setPopPosition();
if($(parentId).html() != ""){
$(".yy-cover").css({"display":"block","width":winWidth + "px","height":docHeight + "px"});
$(popId).css({"display":"block","top": popTop + "px","left":popLeft + "px","transition":"all .5s ease"});
}
})

O啦！

下载：http://download.csdn.net/detail/yy839126257/8604301

yy839126257

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html+css+js实现弹出框+遮罩层

最近看到好多童鞋都在找弹出框和遮罩层的实现。先来说遮罩层是个神马？其实就是你弹出个东西，然后其他地方变黑了一点。就像遮住了其他地方一样。那么实现原理呢？就是设置一个div，宽度，高度是屏幕视口那个大（当然，如果你的document超出了window的大小，那么设置的时候最好还是用document），设置一个 z-index 属性，让它在弹出框下面，在其他地方的上面。原理就是
复制链接

扫一扫