示例之模态对话框

最新推荐文章于 2024-07-24 16:53:23 发布

up1292

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量89

点赞数

分类专栏： JavaScript学习笔记文章标签： html javascript

本文链接：https://blog.csdn.net/up1292/article/details/126674910

版权

JavaScript学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;    
            left:0;
            right:0;
            top:0;
            bottom:0;
            background-color:black;
            opacity: 0.6;   /*透明度*/
            z-index: 9;     /*层级*/
        }
        .c2{
            position: fixed;
            width:500px;
            height:400px;
            left:50%;
            top:50%;
            background-color: white;
            margin-left:-250px;
            margin-top:-200px;
            z-index: 10;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" value="弹出" onclick="Open();" />
    </div>

    <!-- 遮罩层开始 -->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束 -->

    <!-- 弹出框开始 -->
    <div id="i2" class="c2 hide">
        <input type="button" value="关闭" onclick="Close();"/>
    </div>
    <!-- 弹出框结束 -->

    <script>
        function Open() {
            document.getElementById('i1').classList.remove('hide');
            document.getElementById('i2').classList.remove('hide');
        }
        function Close() {
            document.getElementById('i1').classList.add('hide');
            document.getElementById('i2').classList.add('hide');
        }
    </script>
</body>
</html>