模态框的的实现

1. 模态框的制作
   思路： 两个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();
       }
    )