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

最新推荐文章于 2023-08-15 07:52:18 发布

小心窝

最新推荐文章于 2023-08-15 07:52:18 发布

阅读量635

点赞数

分类专栏： Web前端文章标签： css3动画模态框

本文链接：https://blog.csdn.net/qq_36430299/article/details/55258303

版权

Web前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!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

收藏

觉得还不错? 一键收藏
0
评论
使用JS+CSS3实现模态框的效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 使用js实现模态框效果 #myModel{ display: none; z-in
复制链接

扫一扫

专栏目录