如何使用JavaScript和CSS创建模式弹出窗口？

创建模式弹出窗口意味着添加一个对话框，该对话框在单击按钮时生成，并在用户单击弹出窗口之外的任何位置时关闭。
这是带有标题和文本的弹出窗口，如下所示。您也可以在其中添加页脚-
要使用CSS和JavaScript创建模式弹出窗口，请尝试运行以下代码-
示例

<!DOCTYPE html>
<html>
   <head>
      <style>
         .popup {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F1F1F1;
            background-color: rgba(0,0,0,0.4);
            -webkit-animation-name: fadeIn;
            -webkit-animation-duration: 0.4s;
            animation-name: fadeIn;
            animation-duration: 0.4s
         }
         .popup-content {
            position: fixed;
            bottom: 0;
            background-color: #ffffff;
            width: 100%;
            -webkit-animation-name: slideIn;
            -webkit-animation-duration: 0.5s;
            animation-name: slideIn;
            animation-duration: 0.5s
         }
         .end {
            color: white;
            float: right;
            font-size: 15px;
            font-weight: bold;
         }
         .end:hover,
         .end:focus {
            color: #000;
            text-decoration: underline;
            cursor: pointer;
         }
         .popup-header {
            padding: 1px 10px;
            background-color: #8AC1E0;
            color: white;
         }
         .popup-body {padding: 1px 5px;}
         @-webkit-keyframes slideIn {
            from {bottom: -300px; opacity: 0}
            to {bottom: 0; opacity: 1}
         }
         @keyframes slideIn {
            from {bottom: -300px; opacity: 0}
            to {bottom: 0; opacity: 1}
         }
         @-webkit-keyframes fadeIn {
            from {opacity: 0}
            to {opacity: 1}
         }
         @keyframes fadeIn {
            from {opacity: 0}
            to {opacity: 1}
         }
      </style>
   </head>
   <body>
      <h2>Heading</h2>
      <button id="btn">Click for Popup</button>
      <div id="myModal" class="popup">
         <!-- Modal content -->
         <div class="popup-content">
            <div class="popup-header">
               <span class="end">×</span>
               <h2>Header</h2>
            </div>
            <div class="popup-body">
               <p>Demo Text</p>
            </div>
         </div>
      </div>
      <script>
         var popup = document.getElementById('myModal');
         var myBytton = document.getElementById("btn");
         var span = document.getElementsByClassName("end")[0];
         myBytton.onclick = function() {
            popup.style.display = "block";
         }
         span.onclick = function() {
            popup.style.display = "none";
         }
         window.onclick = function(event) {
            if (event.target == popup) {
               popup.style.display = "none";
            }
         }
      </script>
   </body>
</html>
基础教程