您的位置：首页 > Web前端 > JavaScript

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

2015-04-17 14:45 369 查看

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

先来说遮罩层是个神马？

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

那么实现原理呢？

就是设置一个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" onclick="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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 弹出框遮罩层javascript

相关文章推荐

新的分享

章节导航