模态框的的实现

模态框的制作

思路： 两个div进行绝对定位。

背景黑色透明度opacity 设0.8

对前端显示内容的框进行设置，加入模态框需要显示的样式即可。

引入jquery

关于html的布局：

<input type="button" class="btn">
<div class="mtqian">
<img src="images/close.png" class="close" alt=""/>
</div>
<div class="motai"></div>

关于css的样式

.motai{
width: 100%;
height: 1550px;
background: #000000;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
z-index: 10;
display: none;
}
.btn{
width:40px;
height:10px;
border-radius:3px;
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.5);
}
.mtqian{
width: 900px;
height: 500px;
background: pink;
position: absolute;
display: none;
top: 22%;
left: 20%;
z-index: 20;
}
.close{
position: absolute;
top: 5px;
right:5px;
}

关于js方面的代码：

$(".btn").click(function () {
$("html,body").animate({  scrollTop: 1000   },        "slow")
$(".motai").show();
});
$(".close").click(
function(){
$(".motai,.mtqian").hide();
}
)