弹框和遮罩层组件

1、如果一个页面只有一种弹框，最好把遮罩层和弹框写在一个div里面，不要单独写两个div。

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.window-mask {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10001;
    width: 100%;
    min-width: 320px;
    height: 100%;
    text-align: center;
    background-color: rgba(0,0,0,0.5);
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    -moz-box-orient: vertical;
    -moz-box-pack: center;
    vertical-align: middle;
    display: -webkit-box;
    display: -moz-box;
}
.window-detail-box {
    margin: 0 auto;
    padding: 0px 1.0714rem/* 30px */;
    width: 70%;
    background: #fff;
    color: #666;
    border-radius: .1786rem/* 5px */;
    font-size: .5357rem/* 15px */; 
}
.window-detail-box .window-title {
    margin: .8929rem/* 25px */ 0;
}
.window-detail-box .cs-btn-box {
    margin: .8929rem/* 25px */ 0;
}
.window-detail-box .cs-btn {
    float: left;
    width: 45%;
    height: 1.0714rem/* 30px */;
    line-height: 1.0714rem/* 30px */;
    text-align: center;
    color: #666;
    border:1px solid #666;
    border-radius: .7143rem/* 20px */;
}
.window-detail-box .cs-btn.confirm {
    float: right;
    color: #fff;
    background: #ff8447;
    border:1px solid #ff8447;
}

<div class="window-mask hide" id="J_window">
    <div class="window-detail-box">
        <div class="window-title">是否拨打开发商电话？</div>
        <div class="cs-btn-box clearfix">
            <a href="javascript:;" class="cs-btn" id="J_cancel">取消</a>
            <a href="tel:15574874308" class="cs-btn confirm" id="J_submit">确定</a>
        </div>
    </div>
</div>

2、如果一个页面有多种弹框，可以写一个遮罩层div和多个弹框div。也可以写多套（遮罩层和弹框写在一个div里面，如1）div。

转载于:https://www.cnblogs.com/camille666/p/popwindow_masklayer_plugins.html