我在动态按钮上单击时的动态模态

我,我是新来的,所以我并不真正了解麦奇,但是我需要弄清楚这件事：
我有一些动态按钮的php页面.

我希望这个动态按钮打开一个包含动态内容的模式,但是我不知道为什么它不起作用.

从我的测试站点here中可以看到,如果单击第一个按钮,它将显示具有正确内容的模态,但是,如果单击第二个按钮(通常是生成的),则不会显示任何内容.

这是我的代码,但是通过上一个链接可以更容易理解；

<!------------------------------------------- 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,您应该将其更改为单击并获取模态数据的其他逻辑,或者将这个脚本以及数据传给其他人并生成不同的id值
因此,您在整个页面上只能拥有1个myBtn ID,您可以制作类似myBtn1,myBtn2,myBtn3的代码…
要么
< div class ='myBtn'data-id ='1'> … content …< / div>
并使用此数据ID来访问所需的模式

例如,使用jquery显示模式,您可以这样做
首先在每个按钮中将id更改为class,并添加data-id =’number_of_item’数字应该与使用模态时要做的事情不同,应该在同一foreach中使用id =’myModal_number_of_item’生成它们！在您可以使用下面的代码通过查询打开模态后,它对我来说比较容易,但是您可以使用纯JavaScript来实现.

$('.myBtn').on('click', function() {
    var id = $(this).data('id');
    $('#myModal_'+id).show();
})

标签：dynamic,modal-dialog,html,javascript,php
来源： https://codeday.me/bug/20191108/2008801.html