Javascript 多模态，工作但不关闭

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

代码如下：

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

---

如果使用引导，您不需要这样做

.style.display='block'

这首先破坏了您使用框架的全部目的。

引导程序（框架）已经为您处理了这个问题。您所需要做的就是为元素赋予适当的属性，以便引导识别它们并执行任务

在您的情况下，使模态工作。您只需将
data toggle=“modal”
和
data target=“#Modal1”
属性添加到触发器元素（您的按钮）。这些命令告诉框架在单击该元素时通过id
Modal1
打开一个模态

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

或者，您也可以像这样使用javascript关闭模式（在本例中，您不需要
data dismission=“modal”
）




硬盘驱动器格式
10英镑
格式化硬盘驱动器
从驱动器中删除所有文件
重新安装Windows

注册


&时代；
一,

如果使用引导，您不需要这样做

.style.display='block'

这首先破坏了您使用框架的全部目的。
引导程序（框架）已经为您处理了这个问题。您所需要做的就是为元素赋予适当的属性，以便引导识别它们并执行任务

在您的情况下，使模态工作。您只需将
data toggle=“modal”
和
data target=“#Modal1”
属性添加到触发器元素（您的按钮）。这些命令告诉框架在单击该元素时通过id
Modal1
打开一个模态

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

或者，您也可以像这样使用javascript关闭模式（在本例中，您不需要
data dismission=“modal”
）




硬盘驱动器格式
10英镑
格式化硬盘驱动器
从驱动器中删除所有文件
重新安装Windows

注册


&时代；
一,

试试这段代码

HTML

删除您的JS文件并尝试一下

希望这有帮助。
试试这段代码

HTML

删除您的JS文件并尝试一下

希望这有帮助。
使用以下代码：

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

使用以下代码：

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

为什么不在其上使用
data dismission=“modal”
？hi可能重复。您正在使用引导框架吗？为什么不在其上使用
data dismission=“modal”
？hi可能重复。您正在使用引导框架吗？
/* 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;
}

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