HTML 模态窗体演示案例

wp231957 · 发表于 2021-7-5 15:23:35

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title>模态窗体演示案例</title>
    <style>
        #father {
            background: pink;
            height: 100%;
            width: 100%;
            position: absolute;
        }
        
        #child {
            display: none;
            height: 300px;
            width: 500px;
            margin-top: 10%;
            margin-left: 35%;
            position: absolute;
        }
        
        #son {
            background: white;
            height: 180px;
            width: 430px;
            margin-top: 60px;
            margin-left: 1px;
            position: absolute;
        }
        
        #link {
            display: block;
            font-size: 20px;
            height: 50px;
            width: 50px;
            border-radius: 50%;
            margin-top: 30px;
            margin-left: 431px;
            line-height: 50px;
            text-decoration: none;
            background: white;
            text-align: center;
            position: absolute;
        }
        
        #begin {
            margin-top: 100px;
            text-align: center;
            display: block;
        }
    </style>
</head>

<body>
    <div id="father">
        <div id="begin">
            <a id="begina" href="#">点击开始测试</a>
        </div>
        <div id="child">
            <a id="link" href="#">离开</a>
            <div id="son">

            </div>
        </div>
    </div>
    <script>
        var sc = document.querySelector("#child")
        var ba = document.querySelector("#begina")
        ba.addEventListener("click", function() {
            begin.style.display = 'none';
            sc.style.display = "block";
        })
        var lk = document.querySelector("#link")
        lk.addEventListener("click", function() {
            begin.style.display = 'block';
            sc.style.display = "none";
        })
    </script>
</body>

</html>

wp231957 · 发表于 2021-7-5 15:25:32

VSCODE 右键直接运行html文档需加载插件：OPEN IN BROWSER

账号		自动登录	找回密码
密码			立即注册

[学习笔记] HTML 模态窗体演示案例

马上注册，结交更多好友，享用更多功能^_^