使用JS+CSS3实现模态框的效果

来源：互联网发布：美国知乎quora 中国编辑：程序博客网时间：2024/05/01 20:05
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>使用js实现模态框效果</title>    <style type="text/css">        #myModel{            display: none;            z-index: 1;            position: fixed;            left:0;            top:0;            padding-top:100px;            height:100%;            width:100%;            overflow: auto;            background-color: rgba(0,0,0,0.4);        }        .model-content{            position: relative;            width:80%;            margin:0 auto;            background: #FFFFFF;            box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0            rgba(0,0,0,0.19);            -webkit-animation-name: animatetop;            -webkit-animation-duration: 0.4s;            animation-name: animatetop;            animation-duration: 0.4s;        }        @-webkit-keyframes animatetop {            from {top:-300px; opacity:0}            to {top:0; opacity:1}        }        @keyframes animatetop {            from {top:-300px; opacity:0}            to {top:0; opacity:1}        }        .model-head,.model-footer{            padding:2px 16px;            background: #5cb85c;            color: white;            font-size:20px;            margin:0;            font-weight: bolder;        }        .model-body{            padding: 0 10px;        }        .close{            color: #FFFFFF;            font-size:30px;            float: right;            font-weight: bolder;            margin:10px;        }        .close:hover{            cursor: pointer;            color: #000;        }    </style>    <script type="application/javascript">        window.onload = function(){            var btn = document.getElementById("btn");            var model = document.getElementById("myModel");            var close = document.getElementById("close");            btn.onclick = function(){                model.style.display = "block";            }            close.onclick = function () {                model.style.display = "none";            }            window.onclick = function(event){                if(event.target == model){                    model.style.display = "none";                }            }        }    </script></head><body><button id="btn">显示弹窗</button><div id="myModel">    <div class="model-content">        <div class="model-head">            <span class="close" id="close">×</span>            <p>弹窗头部</p>        </div>        <div class="model-body">            <p>内容1</p>            <p>内容2</p>        </div>        <div class="model-footer">            <p>弹窗底部</p>        </div>    </div></div></body></html>
0 0