设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › HTML 模态窗体演示案例
返回列表 发新帖
查看: 3028|回复: 1

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

[复制链接]
wp231957
发表于 2021-7-5 15:23:35 | 显示全部楼层 |阅读模式

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

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

x
  1. <!DOCTYPE html>
  2. <html>

  4. <head>
  5.     <meta charset="utf-8">
  6.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  7.     <title>模态窗体演示案例</title>
  8.     <style>
  9.         #father {
  10.             background: pink;
  11.             height: 100%;
  12.             width: 100%;
  13.             position: absolute;
  14.         }
  15.         
  16.         #child {
  17.             display: none;
  18.             height: 300px;
  19.             width: 500px;
  20.             margin-top: 10%;
  21.             margin-left: 35%;
  22.             position: absolute;
  23.         }
  24.         
  25.         #son {
  26.             background: white;
  27.             height: 180px;
  28.             width: 430px;
  29.             margin-top: 60px;
  30.             margin-left: 1px;
  31.             position: absolute;
  32.         }
  33.         
  34.         #link {
  35.             display: block;
  36.             font-size: 20px;
  37.             height: 50px;
  38.             width: 50px;
  39.             border-radius: 50%;
  40.             margin-top: 30px;
  41.             margin-left: 431px;
  42.             line-height: 50px;
  43.             text-decoration: none;
  44.             background: white;
  45.             text-align: center;
  46.             position: absolute;
  47.         }
  48.         
  49.         #begin {
  50.             margin-top: 100px;
  51.             text-align: center;
  52.             display: block;
  53.         }
  54.     </style>
  55. </head>

  57. <body>
  58.     <div id="father">
  59.         <div id="begin">
  60.             <a id="begina" href="#">点击开始测试</a>
  61.         </div>
  62.         <div id="child">
  63.             <a id="link" href="#">离开</a>
  64.             <div id="son">

  66.             </div>
  67.         </div>
  68.     </div>
  69.     <script>
  70.         var sc = document.querySelector("#child")
  71.         var ba = document.querySelector("#begina")
  72.         ba.addEventListener("click", function() {
  73.             begin.style.display = 'none';
  74.             sc.style.display = "block";
  75.         })
  76.         var lk = document.querySelector("#link")
  77.         lk.addEventListener("click", function() {
  78.             begin.style.display = 'block';
  79.             sc.style.display = "none";
  80.         })
  81.     </script>
  82. </body>

  84. </html>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

wp231957
 楼主| 发表于 2021-7-5 15:25:32 | 显示全部楼层
VSCODE  右键直接运行html文档  需加载插件：OPEN IN BROWSER
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-28 01:50

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表