Javascript 如何为弹出框使用addEventListener（）、querySelectorAll和GetElementsByCassName
我想在我的网站上放一个具有相同ID的弹出框。这些弹出框应该在我点击按钮后显示。这些按钮具有相同的Id 我的脚本代码是Javascript 如何为弹出框使用addEventListener（）、querySelectorAll和GetElementsByCassName,javascript,Javascript,我想在我的网站上放一个具有相同ID的弹出框。这些弹出框应该在我点击按钮后显示。这些按钮具有相同的Id 我的脚本代码是 <script type="text/javascript"> // Get modal element var modal = document.querySelectorAll('.simpleModal'); // Get open modal button var modalBtn = document.querySelectorAll('.modal
<script type="text/javascript">
// Get modal element
var modal = document.querySelectorAll('.simpleModal');
// Get open modal button
var modalBtn = document.querySelectorAll('.modalBtn');
// Get close button
var closeBtn = document.querySelectorAll('.closeBtn')[0];
for (var i = 0; i < modalBtn.length; i++) {
modalBtn[i].addEventListener('click', openModal);
// Listen for close click
closeBtn[i].addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
}
function openModal(){
modal.style.display = 'block';
}
// Function to close modal
function closeModal(){
modal.style.display = 'none';
}
// Function to close modal if outside click
function outsideClick(e){
if(e.target == modal){
modal.style.display = 'none';
}
}
</script>
//获取模态元素
var modal=document.queryselectoral（'.simpleModal'）；
//获取打开模式按钮
var modalBtn=document.querySelectorAll（'.modalBtn'）；
//接近按钮
var closeBtn=document.querySelectorAll（'.closeBtn'）[0]；
对于（变量i=0；i<?php echo"<a href='single.php'><img title=' ' alt=' ' src='images/$row2[pic]'></a>
<p>Cookware</p>
<h4>$ $row2[price] <span>$45.00</span></h4>"?>
</div>
<?php echo"
<button class='modalBtn button'>Details</button>
<div class='simpleModal modal'>
<div class='modal-content'>
<div class='modal-header'>
<span class='closeBtn'>×</span>
<h2>Modal Header</h2>
</div>
<div class='modal-body'>
<p>$row2[name]</p>
<p>$row2[description]</p>
</div>
<div class='modal-footer'>
<h3>Modal Footer</h3>
</div>
</div>
</div>
</div>"?>
问题在于：
var modal=document.querySelectorAll（'.simpleModal'）
modal是节点列表，而不是元素。如果要选择单个.simpleModel
，请使用querySelector
而不是querySelectorAll
定义modal
如下：
var modal=document.querySelector（'.simpleModal'）
（您也可以对closeBtn执行相同的操作-避免querySelectorAll
当您只想选择单个元素时，请改用普通querySelector
）问题在于：
var modal=document.querySelectorAll（'.simpleModal'）
modal是节点列表，而不是元素。如果要选择单个.simpleModel
，请使用querySelector
而不是querySelectorAll
定义modal
如下：
var modal=document.querySelector（'.simpleModal'）
（您也可以对closeBtn执行相同的操作-避免querySelectorAll
当您只想选择单个元素时，请改用普通querySelector
）类似的操作应该可以
当你点击按钮时，它会得到在你的案例中的模态，并显示出来
当您单击close时，它通过遍历父对象来获取模态，并将其隐藏
单击窗口时，它会检查单击是否来自模态内部，如果不是，则隐藏
var modalBtn=document.queryselectoral（'.modalBtn'）；
var closeBtn=document.querySelectorAll（'.closeBtn'）；
对于（变量i=0；i
.modal{
显示：无；
}
详细信息
&时代；
模态头
$row2[姓名]
$row2[说明]
模态页脚
像这样的东西应该可以用
当你点击按钮时，它会得到在你的案例中的模态，并显示出来
当您单击close时，它通过遍历父对象来获取模态，并将其隐藏
单击窗口时，它会检查单击是否来自模态内部，如果不是，则隐藏
var modalBtn=document.queryselectoral（'.modalBtn'）；
var closeBtn=document.querySelectorAll（'.closeBtn'）；
对于（变量i=0；i
.modal{
显示：无；
}
详细信息
&时代；
模态头
$row2[姓名]
$row2[说明]
模态页脚
谢谢您的回复，先生。我有许多具有相同Id的按钮。每个按钮单击时都应显示弹出框。具有相同Id的多个元素是无效的HTML，但我在您的代码中没有看到任何具有任何Id的元素。我在HTML代码中指定了这些元素。我从数据库中导出了项目列表。这些列表显示了您发布的PHP代码，但其中仍然没有任何id
属性。请随意在illustr上发布一个更完整的HTML示例（不是PHP）
<div class="agile_top_brands_grids">
<div class="col-md-4 top_brand_left">
<div class="hover14 column">
<div class="agile_top_brand_left_grid">
<div class="agile_top_brand_left_grid_pos">
<img src="images/offer.png" alt=" " class="img-responsive">
</div>
<div class="agile_top_brand_left_grid1">
<figure>
<div class="snipcart-item block">
<div class="snipcart-thumb">
<a href='single.php'><img title=' ' alt=' ' src='images/c.png'></a>
<p>Cookware</p>
<h4>452<span>$45.00</span></h4>"?>
</div>
<button id='modalBtn' class=' button'>Details</button>
<div id='simpleModal' class=' modal'>
<div class='modal-content'>
<div class='modal-header'>
<span class='closeBtn'>×</span>
<h2>Modal Header</h2>
</div>
<div class='modal-body'>
<p>biscuit</p>
<p>tasty food</p>
</div>
<div class='modal-footer'>
<h3>Modal Footer</h3>
</div>
</div>
</div>
<button id='modalBtn' class=' button'>Details</button>
<div id='simpleModal' class=' modal'>
<div class='modal-content'>
<div class='modal-header'>
<span class='closeBtn'>×</span>
<h2>Modal Header</h2>
</div>
<div class='modal-body'>
<p>biscuit</p>
<p>tasty food</p>
</div>
<div class='modal-footer'>
<h3>Modal Footer</h3>
</div>
</div>
</div>
<button id='modalBtn' class=' button'>Details</button>
<div id='simpleModal' class=' modal'>
<div class='modal-content'>
<div class='modal-header'>
<span class='closeBtn'>×</span>
<h2>Modal Header</h2>
</div>
<div class='modal-body'>
<p>biscuit</p>
<p>tasty food</p>
</div>
<div class='modal-footer'>
<h3>Modal Footer</h3>
</div>
</div>
</div>
<button id='modalBtn' class=' button'>Details</button>
<div id='simpleModal' class='modal'>
<div class='modal-content'>
<div class='modal-header'>
<span class='closeBtn'>×</span>
<h2>Modal Header</h2>
</div>
<div class='modal-body'>
<p>biscuit</p>
<p>tasty food</p>
</div>
<div class='modal-footer'>
<h3>Modal Footer</h3>
</div>
</div>
</div>
<button id'modalBtn' class=' button'>Details</button>
<div id='simpleModal' class=' modal'>
<div class='modal-content'>
<div class='modal-header'>
<span class='closeBtn'>×</span>
<h2>Modal Header</h2>
</div>
<div class='modal-body'>
<p>biscuit</p>
<p>tasty food</p>
</div>
<div class='modal-footer'>
<h3>Modal Footer</h3>
</div>
</div>
</div>
</div>
</figure>
</div>
</div>
</div>
</div>
</div>