javascript - 多种模式，工作但不关闭

Question

我想寻求帮助。所以我有多个链接到不同按钮的模态。它们可以正常打开并正确显示，但除非刷新页面，否则根本不会关闭。

这是代码:

<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button 
onclick="document.getElementById('Modal1').style.display='block'">Sign 
Up</button></a></li>
</ul>
</div>

<div class="columns">
<ul class="price">
<li class="header">Hardware Repairs</li>
<li class="grey">£50 and up</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button 
onclick="document.getElementById('Modal2').style.display='block'">Sign 
Up</button></a></li>
</ul>
</div>

<div class="columns">
<ul class="price">
<li class="header">Hard Drive Format</li>
<li class="grey">£10</li>
<li>Format Hard Drive</li>
<li>Removes ALL Files From Drive</li>
<li>Fresh Install Windows</li>
<li class="grey"><button 
onclick="document.getElementById('Modal3').style.display='block'">Sign 
Up</button></li>
</ul>
</div>

<!-- The Modal -->
<div id="Modal1" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>1</p>
</div>

</div>

<!-- The Modal -->
<div id="Modal2" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>2</p>
</div>

</div>

<!-- The Modal -->
<div id="Modal3" class="modal">

<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<p>3</p>
</div>

</div>

<script>
// Get the modal
var modal = document.getElementById('Modal1');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
</script>

<script>
// Get the modal
var modal = document.getElementById('Modal2');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
</script>

<script>
// Get the modal
var modal = document.getElementById('Modal3');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
    modal.style.display = "none";
}
}
</script>

这是 CSS

/* Create three columns of equal width */
.columns {
float: left;
width: 33.3%;
padding: 8px;
}

/* Style the list */
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}

/* Add shadows on hover */
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .header {
background-color: #111;
color: white;
font-size: 25px;
}

/* List items */
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}

/* Grey list item */
.price .grey {
background-color: #eee;
font-size: 20px;
}

/* The "Sign Up" button */
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}

/* Change the width of the three columns to 100% 
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
.columns {
    width: 100%;
 }
}

/* The Modal (background) */
.modal {
display: none; /* 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: 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;
}

Answer 1

如果使用 Bootstrap ，您不需要需要执行此操作

.style.display='block'

这首先违背了您使用框架的全部目的。 bootstrap (框架)已经为您处理了这个问题。您需要做的就是为元素提供适当的属性，以便 Bootstrap 识别它们并执行任务。

就您而言，要使模态起作用。您所需要的只是 data-toggle="modal"和data-target="#Modal1"属性触发元素(您的按钮)。这些告诉框架通过 id Modal1 打开一个模式。单击此元素时。

<li class="grey">
  <button data-toggle="modal" data-target="#Modal1">Sign Up</button>
</li>

然后要关闭模式，您需要给出 data-dismiss="modal"在您的“x”跨度元素上(在本例中您不需要 class="close")。

<span data-dismiss="modal">&times;</span>

或者，您也可以使用 javascript 来关闭模式，如下所示(在这种情况下您不需要 data-dismiss="modal")

$(".close").on('click', function() {
    $('#Modal1').modal('hide');
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="columns">
  <ul class="price">
    <li class="header">Hard Drive Format</li>
    <li class="grey">£10</li>
    <li>Format Hard Drive</li>
    <li>Removes ALL Files From Drive</li>
    <li>Fresh Install Windows</li>
    <li class="grey">
      <button data-toggle="modal" data-target="#Modal1">Sign Up</button>
    </li>
  </ul>
</div>

<div id="Modal1" class="modal" data-dismiss="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" data-dismiss="modal">&times;</span>
    <p>1</p>
  </div>
</div>