ASCII码 ASCII码

模态框小实例

发布于：2022-04-12 10:56:20  栏目：技术文档

模态框小实例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. </head>
  9. <style>
  10.     *{
  11.         margin: 0;
  12.         padding: 0;
  13.         box-sizing: border-box;
  14.     }
  15.     .notes{
  16.         width: 100px;
  17.         height: 100px;
  18.         background-color: coral;
  19.         position: fixed;
  20.         top: 200px;
  21.         right: 0;
  22.         text-align: center;
  23.         line-height: 100px;
  24.         color: #fff;
  25.     }
  26.     /* 遮罩层 */
  27.     .modal .modal-bg{
  28.         position: fixed;
  29.         /* 坐标全部清0,请定位到四个顶点 */
  30.         top: 0;
  31.         right: 0;
  32.         bottom: 0;
  33.         left: 0;
  34.         background-color: rgb(0,0,0,.5);
  35.     }
  36.     /* 弹出层模态框 */
  37.     /* 定位 */
  38.     .modal .modal-form {
  39.         position: fixed;
  40.         top: 10em;
  41.         left: 28em;
  42.         right: 28em;
  43.     }
  44.     .modal .modal-form fieldset {
  45.         height: 22em;
  46.         background-color: lightcyan;
  47.         border: none;
  48.         padding: 2em 3em;
  49.         box-shadow: 0 0 5px #888;
  50.     }
  51.     .modal .modal-form fieldset legend{
  52.         color: #fff;
  53.         background-color: coral;
  54.         padding: 8px 2em;
  55.     }
  56.     .modal .modal-form fieldset textarea{
  57.         width:45em;    
  58.         outline: none;
  59.         border: 1px solid #ddd;
  60.         font-size: 14px;
  61.         margin-top: 8px;
  62.     }
  63.     .modal .modal-form fieldset input{
  64.         width:22em;    
  65.         outline: none;
  66.         border: 1px solid #ddd;
  67.         font-size: 14px;
  68.         margin-top: 8px;
  69.         height: 30px;
  70.         margin-left: 8px;
  71.     }
  72.     .modal .modal-form fieldset button{
  73.         width: 14em;
  74.         margin-left: 10px;      
  75.         outline: none;
  76.         border: 1px solid #ddd;
  77.         height: 30px;
  78.         background-color: coral; 
  79.         cursor: pointer;
  80.         color: #fff;
  81.     }
  82.     .modal{
  83.         display: none;
  84.     }
  85. </style>
  86. <script>
  87.     //显示模态框
  88.     function showModal(){
  89.         //获取模态框元素
  90.         const modal = document.querySelector('.modal');
  92.         //显示模态框
  93.         modal.style.display = 'block';
  95.         //焦点自动置入第一个文本域
  96.         modal.querySelector('textarea').focus();
  97.     }
  99.     //关闭模态框
  100.     function closeModal(){
  101.          //获取模态框元素
  102.          const modal = document.querySelector('.modal');
  104.          //关闭模态框
  105.         modal.style.display = 'none';         
  106.     }
  107. </script>
  108. <body>
  109.     <div class="notes" onclick="showModal()">点我留言</div>
  110.     <!-- 模态框 -->
  111.     <div class="modal">
  112.         <!-- 模态框遮罩层 -->
  113.         <div class="modal-bg" onclick="closeModal()"></div>
  114.         <!-- 弹出层 -->
  115.         <div class="modal-form">
  116.             <fieldset>
  117.                 <legend>市长信箱</legend>
  118.                 <label for="your-notes">您的留言:</label><textarea name="notes" id="your-notes" cols="30" rows="10" placeholder="请输入您的留言"></textarea>
  119.                 <label for="your-email">您的邮箱:</label><input type="email" name="email" id="your-email" placeholder="请输入您的邮箱如：123@com">
  120.                 <button>提  交</button>
  121.             </fieldset>
  122.         </div>
  123.     </div>
  124. </body>
  125. </html>

模态框实例

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行