search

博客列表 >模态框案例

模态框案例

P粉150142745
P粉150142745原创
2022年03月28日 12:20:33483浏览

模态框案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>模态框</title>
  8.     <link rel="styleheet" href="modal.css" />
  9.   </head>
  11.   <body>
  12.     <header>
  13.       <h2 class="title">myblogs</h2>
  14.       <button onclick="showModal()">点击登录</button>
  15.     </header>
  16.     <div class="modal">
  17.       <div class="modal-bg" onclick="closeModal()"></div>
  18.       <form action="" class="modal-form">
  19.         <fieldset style="display: grid; gap: 1em">
  20.           <legend>用户登录</legend>
  21.           <input type="email" name="email" placeholder="user@email.com" />
  22.           <input type="password" name="password" placeholder="不少于6位" />
  23.           <button>登录</button>
  24.         </fieldset>
  25.       </form>
  26.     </div>
  27.     <script src="modal.js"></script>
  28.   </body>
  29.   <style>
  30.     * {
  31.       margin: 0;
  32.       padding: 0;
  33.       box-sizing: border-box;
  34.     }
  35.     header {
  36.       background-color: lightseagreen;
  37.       padding: 0.8em 1em;
  38.       display: flex;
  39.     }
  40.     header .title {
  41.       font-weight: lighter;
  42.       font-style: italic;
  43.       color: white;
  44.       letter-spacing: 2px;
  45.       text-shadow: 1px 1px 1px rgb(133, 132, 132);
  46.     }
  47.     header button {
  48.       margin-left: auto;
  49.       width: 5em;
  50.       border: none;
  51.       border-radius: 0.6em;
  52.     }
  53.     header button:hover {
  54.       cursor: pointer;
  55.       background-color: rgb(149, 149, 98);
  56.       color: #fff;
  57.       box-shadow: 0 0 5px #fff;
  58.       transition: 0.4s;
  59.     }
  60.     /* 模态框*/
  61.     .modal .modal-form fieldset {
  62.       height: 15.5em;
  63.       background-color: lightcyan;
  64.       border: none;
  65.       padding: 2em 3em;
  66.       box-shadow: 0 0 5px #888;
  67.     }
  68.     /* 模态框表单标题 */
  69.     .modal .modal-form fieldset legend {
  70.       padding: 7px 1.5em;
  71.       background-color: rgb(7, 126, 120);
  72.       color: white;
  73.     }
  74.     .modal .modal-form fieldset input {
  75.       height: 3em;
  76.       padding-left: 1em;
  77.       outline: none;
  78.       border: 1px solid rgb(114, 13, 13);
  79.       font-size: 14px;
  80.     }
  81.     /* :focus: 表单控件,获取焦点时的样式 */
  82.     .modal .modal-form fieldset input:focus {
  83.       box-shadow: 0 0 8px #888;
  84.       border: none;
  85.     }
  86.     .modal .modal-form fieldset button {
  87.       background-color: lightseagreen;
  88.       color: white;
  89.       border: none;
  90.       height: 3em;
  91.       font-size: 16px;
  92.       height: 2.5em;
  93.       border-radius: 0.6em;
  94.     }
  95.     .modal .modal-form fieldset button:hover {
  96.       background-color: rgb(221, 173, 15);
  97.       cursor: pointer;
  98.     }
  99.     /* 定位 */
  100.     .modal .modal-form {
  101.       position: fixed;
  102.       top: 10em;
  103.       left: 18em;
  104.       right: 38em;
  105.     }
  106.     /* 遮罩 */
  107.     .modal .modal-bg {
  108.       position: fixed;
  109.       /* 坐标全部清0,请定位到四个顶点 */
  110.       top: 0;
  111.       left: 0;
  112.       right: 0;
  113.       bottom: 0;
  114.       background-color: rgba(185, 48, 48, 0.4);
  115.     }
  116.     .modal {
  117.       display: none;
  118.     }
  119.   </style>
  120. </html>

上一条：布局实战代码下一条：模态框练习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多