JS封装弹起和关闭遮罩层的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    .overlay{
            -webkit-box-align: center;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            -webkit-transition: 200ms opacity;
            background-color: rgba(255, 255, 255, 0.1);
            bottom: 0;
            display: -webkit-box;
            left: 0;
            overflow: auto;
            padding: 20px;
            position: fixed;
            right: 0;
            top: 0;
            z-index: 2;
        }
        .overlay .page {
            -webkit-border-radius: 3px;
            -webkit-box-orient: vertical;
            -webkit-transition: 200ms -webkit-transform;
            background: white;
            box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);
            color: #333;
            display: -webkit-box;
            min-width: 400px;
            min-height: 100px;
            padding: 0 10px 5px 10px;
            position: relative;
            z-index: 0;
        }
        .overlay .page > .close-button {
            background-image: url(images/IDR_CLOSE_DIALOG);
            background-position: center;
            background-repeat: no-repeat;
            height: 14px;
            position: absolute;
            right: 7px;
            top: 7px;
            width: 14px;
            z-index: 1;
            cursor:pointer;
        }
        .orderfoot {
            margin-top: 15px;
            margin-bottom: 5px;
            text-align: center;
        }
        .lBtn {
            height: 30px;
            min-width: 80px;
            text-align: center;
            color: #a33300;
            font: 13px/40px "微软雅黑E\8F6F\96C5\9ED1";
            background-color: #FFCD1A;
            text-decoration: none;
            border: 0;
            cursor: pointer;
            background-size: 100% 300%;
            line-height: 30px;
        }
    </style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body style="width:700px;height:800px;border:1px solid red;margin:0px auto;padding:10px;">
    <button class="lBtn"  onclick="add_Mask()">调用弹窗方法</button>
</body>
</html>
<script type="text/javascript">
    function add_Mask(){
        var str='<div class="page" style="width:600px;height:470px;border:1px solid black;margin:0px auto;"><h3 class="tanchu_title">新增页面</h3><div class="close-button" onclick="close_xianshi(this)" id="indent_zan_cun_guanbi1">X</div><div class="dialog_content" style="height:339px;padding:10px;border:1px solid red"></div><div class="orderfoot" style=" margin-top:0px"><input type="button" onclick="add_Mask()" value="确 定" class="lBtn" style="margin-right:20px;"><input type="button" value="取 消" class="lBtn" style="margin-right:20px;" onclick="close_xianshi(this)"></div>'
        CreatDialog(str,"new_mask");
    }
    //开启页面
     function CreatDialog(html,biao_ji){
        if($("."+biao_ji).length>0){
             $("."+biao_ji).remove();
         }
     var eee=$("<div class='overlay "+biao_ji+"' style='display: -webkit-box;'></div>");
      //var eee=$("<div class='overlay' style='display: -webkit-box;'></div>").html(html);
      //$("body").append(eee);
      $("body").append(eee);
       eee.html(html);
    }
     //关闭页面
    function close_xianshi(obj)
    {
        if($(obj).length<1){
            return false;
            }
        if($(obj).hasClass('page'))
            {
                $(obj).parent().remove();
            }else{
                close_xianshi($(obj).parent());
            }
    }
</script>
JS封装 弹起和关闭 遮罩层的 方法

猜你喜欢

JS封装弹起和关闭遮罩层的方法
