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>

然后要关闭模态，您需要在“x”span元素上提供data-dismiss="modal"（在这种情况下，您不需要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>

Answer 2

尝试此代码

HTML

<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></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 data-toggle="modal" data-target="#Modal2">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 data-toggle="modal" data-target="#Modal3">Sign Up</button></li>
  </ul>
</div>

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

<!-- The Modal -->
<div id="Modal2" class="modal fade">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" data-dismiss="modal">&times;</span>
    <p>2</p>
  </div>
</div>



<!-- The Modal -->
<div id="Modal3" class="modal fade">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close" data-dismiss="modal">&times;</span>
    <p>3</p>
  </div>
</div>

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%;
 }
}


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

删除你的JS文件并试一试

希望这有帮助。

Answer 3

使用以下代码：

$('.modal').modal('hide');

多个模态，工作但不关闭

3 个答案: