zoukankan      html  css  js  c++  java
  • 模态弹出窗口

    原理:

      利用CSS布局产生一个全局的窗口的对当前页面进行覆盖,然后在弹出窗口中布局表单进行交互。

    Demo:

     1 <!DOCTYPE html>
     2 <html lang="en" dir="ltr">
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style media="screen">
     7             .overlay {
     8                 position: fixed;
     9                 top: 0;
    10                 right: 0;
    11                 bottom: 0;
    12                 left: 0;
    13                 z-index: 103;
    14                 width: 100%;
    15                 height: 100%;
    16                 background: #666666;
    17                 opacity: 0.7;
    18             }
    19 
    20             .modal {
    21                 position: absolute;
    22                 top: 0;
    23                 right: 0;
    24                 bottom: 0;
    25                 left: 0;
    26                 z-index: 101;
    27                 margin: 100px auto;
    28                 width: 600px;
    29                 height: 400px;
    30                 background: lightyellow;
    31                 text-align: center
    32             }
    33             .modalControl {
    34                 visibility: hidden;
    35             }
    36         </style>
    37     </head>
    38     <body>
    39         <button class="experiment">控制</button>
    40         <div class="overlay modalControl">
    41             <div class="modal">
    42                 模态弹出窗口
    43                 <button class="reset">退出窗口</button>
    44             </div>
    45         </div>
    46         <script>
    47             let func = function () {
    48                 let x = document.querySelector('.overlay')
    49                 x.classList.toggle('modalControl')
    50             }
    51 
    52             // 弹出模态窗口
    53             let ele = document.querySelector('button')
    54             ele.addEventListener('click', func)
    55 
    56             // 退出模态窗口
    57             ele = document.querySelector('.reset')
    58             ele.addEventListener('click', func)
    59         </script>
    60     </body>
    61 </html>

    显示效果:

  • 相关阅读:
    重点解说--MVVM指南(课程学习)
    模块划分--MVVM指南(课程学习)
    开发步骤--MVVM指南(课程学习)
    MVVM指南(课程学习)
    centos vi和vim用法
    阿里云centos系统上安装ftp
    thinkphp的ip地址定位
    thinkphp方便分页的page方法
    thinkphp data方法
    thinkphp i方法
  • 原文地址:https://www.cnblogs.com/oulae/p/11221559.html
Copyright © 2011-2022 走看看