如何显示非模态/非模态 HTML/JavaScript 对话答案

【问题标题】：How to display a nonmodal / modeless HTML / JavaScript dialogue如何显示非模态/非模态 HTML/JavaScript 对话
【发布时间】：2020-04-19 12:34:56
【问题描述】：

我根据 w3schools 上的示例创建了一个模态对话。但是我一直无法找到有关如何使其成为非模态的指导。 IE。是否可以显示对话并且我仍然可以在后台按下链接？

实际上，我想要实现的是允许对话内的链接可点击，并允许其后面主页上的 JavaScript 对这些事件做出反应。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy"  content="connect-src * 'unsafe-inline';">
        <style>
/* The Modal (background) */
.modal {
  display:block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow-y: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 
    </style>
    </head>

<body>
    <a href='#'>Press me press me I am blocked</a>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
        <span class="close" onclick="modalHide()">&times;</span>
        <div id="modtext">Some text in the Modal..</div>
        </div>
    </div>
    <script>
    function modalHide(){
        document.getElementById("myModal").style.display = "none";
    }
    </script>
</body>

</html>

【问题讨论】：

标签： javascript html modal-dialog non-modal

【解决方案1】：

只需删除 (.modal) 模态背景，因为它用作叠加层。

/* The Modal (background) */
.modal {
  display:block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow-y: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

上面的代码正在创建一个叠加层并在其中显示对话框。如果您删除它，您的对话框后面的链接将起作用。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Security-Policy"  content="connect-src * 'unsafe-inline';">
        <style>


/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 
    </style>
    </head>

<body>
    <a href='#'>Press me press me I am blocked</a>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal content -->
        <div class="modal-content">
        <span class="close" onclick="modalHide()">&times;</span>
        <div id="modtext">Some text in the Modal..</div>
        </div>
    </div>
    <script>
    function modalHide(){
        document.getElementById("myModal").style.display = "none";
    }
    </script>
</body>

</html>

【讨论】：