我，我是新来的，所以我不是很了解mutch，但是我需要弄清楚这件事：我有一个带有一些动态按钮的php页面。
我希望这个动态按钮打开一个包含动态内容的模式，但是我不知道为什么它不起作用。
你可以从我的测试网站上看到这里，如果你点击第一个按钮，将显示与正确的内容模式，但如果你点击的第二个按钮（dinamically generatated）不显示点儿。
这是我的代码，但是通过上一个链接可以更容易理解；
<!------------------------------------------- ATTIVAZIONE MODAL--------------------------------->
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("<?php echo $mq_solarium; ?>");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("chiudi_dimensione")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "flex";
}
// 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>
<!-------------------------------------------FINE ATTIVAZIONE MODAL--------------------------------->.plan-wrapper {
border: 3px solid #73AD21;
}<div class="hero-wrapper dimensioni">
<?php
//estraggo i valori per smart
$query=mysqli_query($con, " SELECT * FROM appartamenti INNER JOIN moduli ON appartamenti.id_planimetria = moduli.id_planimetria WHERE taglio='monolocale' AND visibile='1' ");
?>
<div id="myBtn"class="plan-wrapper">click me</div>
<div style="background-color:DodgerBlue;" id="myModal" class="lightbox_wrapper_dimensione">
<div id="close" class="chiudi_dimensione">X(close)</div>
some variables from php
</div>
</div>
<?php
}
}
else {
// redirect user to another page
header( "Location: ../index.php" ); die;
}
?>
<!------------------------------------------- CHIUSURA PHP--------------------------------->
</div>问题在于getElementById()它只能触发1个id，这时您应该将其更改为单击并获取模态数据的另一种逻辑，或者将这个脚本以及数据和foreach生成不同的id值，因此myBtn整个页面上只能有1个id您可以制作，，...或类似的内容myBtn1，并使用它来访问所需的模态myBtn2myBtn3<div class='myBtn' data-id='1'>...content...</div>data-id
例如，要显示使用jquery的模式，您可以像这样先在每个按钮中将id更改为class，并添加data-id='number_of_item'数字，这与使用模式应执行的相同操作应该id='myModal_number_of_item'在相同的foreach中使用它们生成！在您可以使用下面的代码通过查询打开模态后，它对我来说比较容易，但是您可以使用纯JavaScript来实现。
$('.myBtn').on('click', function() {
var id = $(this).data('id');
$('#myModal_'+id).show();
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句