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

Question

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

实际上我想要实现的是允许对话中的 links 可以点击，并允许其后面主页上的 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>

Answer 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 */
}

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

<!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>

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

How to display a nonmodal / modeless HTML / JavaScript dialogue

html

javascript

modal-dialog

non-modal