先上效果,后面的代码为了让样式复制不那么麻烦,我尽量多写在行内
其中js是依赖jquery1.8x ,请自行加入
上一版本比较复杂,结合了js ,ajax请求和诸多交互的js代码
点击了解上一版本
这版本是js只管弹出窗体以及遮罩
/**
* 点击弹出框的地方
*/
function moreWhInfo() {
$("#MyDiv").show();//弹出窗体
$(".mask").show(); //遮罩层
};
//关闭弹出层
$(".closeBtn").click(function () {
$("#MyDiv").hide();
$(".mask").hide();
});
Html
<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
.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;
版权声明:本文为fly19920602原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。