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

HTML 模态窗体演示案例

<!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
页: [1]
查看完整版本: HTML 模态窗体演示案例