模态框的的实现

来源：互联网发布：arp通过ip获取mac 编辑：程序博客网时间：2024/06/10 08:47

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

0 0