htmledit_views">

先上效果，后面的代码为了让样式复制不那么麻烦，我尽量多写在行内

 

其中html" title=js>js是依赖jquery1.8x  ,请自行加入

上一版本比较复杂，结合了html" title=js>js ，ajax请求和诸多交互的html" title=js>js代码 

点击了解上一版本

 

这版本是html" title=js>js只管弹出窗体以及遮罩

html hlhtml" title=js>js">/**
 * 点击弹出框的地方
 */
function moreWhInfo() {
    $("#MyDiv").show();//弹出窗体
    $(".mask").show(); //遮罩层
};

//关闭弹出层
$(".closeBtn").click(function () {

    $("#MyDiv").hide();
    $(".mask").hide();
});

 Html

html hlhtml" title=js>js"><div class="more-tjm-info" onclick="moreWhInfo()">More</div>


<div id="MyDiv" class="white_content">
    <div class="top-div">
        <div style="width: 230px;height: 20px;font-size: 20px;font-weight: 600;color: #666666;margin: 11px;">
            4 warehouse in Singapore
        </div>
        <div class="closeBtn" οnclick="closeBtn()"
             style="width: 14px;height: 14px;padding-right: 2px;font-weight: bold;color: #666666;">
            X
        </div>
    </div>
    <div style="display:flex;width: 689px;height: 128px;font-size: 16px;font-family: Titillium Web;font-weight: 400;color: #666666;opacity: 0.9;margin-top: 20px;">
        <div id="tjm-info1" style="margin-left: 10px; margin-right: 10px;width: 25px;height: 25px;background: #666666;border-radius: 50%;color: white;">01</div>
        <div id="tjm-info2" style="width: 579px;height: 128px;font-size: 16px;font-family: Titillium Web; font-weight: 400;color: #666666;opacity: 0.9;">
            <div class="ct-per2" style="display: flex;">
                <div class="ct-p2">Contact person :</div>
                <div class="ct-pname2" style="text-align: left;margin-left: 5px;"></div>
            </div>

            <div class="t-and-p2" style="display: flex;">
                <div class="tel2" style="display: flex;">
                    <div class="tel-t2" style="width: 42px;">Tele :</div>
                    <div class="tel-n2" style="width: 211px;text-align: left;margin-left: 5px;"></div>
                </div>
                <div class="phone2" style="display: flex;">
                    <div class="p-t2" style="width:63px;">Mobile :</div>
                    <div class="p-n2" style="width: 200px;text-align: left;margin-left: 5px;"></div>
                </div>
            </div>

            <div class="e-and-w2" style="display: flex;">
                <div class="email2" style="display: flex;">
                    <div class="e-t2" style="width: 50px;">Email :</div>
                    <div class="e-n2" style="width: 200px;text-align: left;margin-left: 5px;"></div>
                </div>
                <div class="whatapp2" style="display: flex;">
                    <div class="w-t2" style="width: 86px;">Whatapp :</div>
                    <div class="w-n2" style="width: 200px;text-align: left;margin-left: 5px;"></div>
                </div>
            </div>

            <div class="addrees2" style="display: flex;">
                <div class="a-t2" style="width:87px;text-align: left;">Address :</div>
                <div class="a-v2" style="text-align: left;margin-left: 5px;"></div>
            </div>

        </div>
    </div>

</div>

<div  class="mask" style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);display: none;z-index: 999;"></div>

 

CSS

 

html hlhtml" title=js>js">.white_content {
    display: none;
    position: absolute;
    top: 18%;
    left: 26%;

    width: 689px;
    height: 421px;
    background: #FFFFFF;
    border-radius: 6px;

    z-index: 1002; //这是窗体的要比遮罩大
    overflow: auto;
    position: fixed;
}

.top-div {
    display: flex;
    height: 56px;
    background: #FFFFFF;
    border-bottom: 1px solid #cccc;;
}

.closeBtn{
    width: 14px;
    height: 14px;
    margin-left: 397px;
    margin-top: 18px;
    font-weight: bold;
    font-size: 14px;
    color: #666666;
    width: 5%; 
    cursor: pointer;
}

 

以上就是一个简单的弹出和遮罩，遮罩的z-index设置的值要比弹出窗体小一些,我写在行内了z-index: 999;