从PHP查询加载数据到Modal
嗨我有一个模式,我想动态加载从while循环接收的数据,我分配ID,但模式只显示最后一行数据(图像)。从PHP查询加载数据到Modal
这是我的PHP
<script>
var slider_counter2 = 0;
</script>
<?php
$slide_counter1=0;
while($data=$select->fetch()){
$slide_counter1++;
?>
<script>
slider_counter2++;
</script>
<!-- The Modal -->
<div id="myModal_<?php echo $slide_counter1;?>" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close" id="modal_close_btn_<?php echo $slide_counter1;?>">×</span>
<div class="modal-body">
<img class="propertylistboximgfilled" src="../images/user/final_<?php echo $data['property_image1'];?>">
</div>
</div>
</div>
<script type="text/javascript" src="../js/modal.js"></script>
<?php } ?>
这是我的javascript
var modal = document.getElementById('myModal_'+slider_counter2);
// Get the button that opens the modal
var btn = document.getElementById('modalopener_'+slider_counter2);
// Get the <span> element that closes the modal
var span = document.getElementById('modal_close_btn_'+slider_counter2);
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// 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";
}
}
可能是错误在这个....
当您再次加载脚本文件,它会覆盖几个变量,如modal
,btn
,span
。运行此页面后,modal
将被分配最后一个模态元素。这使得每个btn.onclick
和span.onclick
都尝试更改最后一个模态元素。
如果在全球范围内使用var something
,则会造成所有问题。在JS中,它可以解决各种技术,如范围,封闭,IIFE。 (每个关键字,如果你想使用JS很重要。)
function btn_onclick(modal) {
return function() {
modal.style.display = "block";
};
}
function span_onclick(modal) {
return function() {
modal.style.display = "none";
};
}
function window_onclick(modal) {
return function(event) {
if (event.target == modal) {
modal.style.display = "block";
}
};
}
这三个函数返回的新功能,我们需要使用同时,各职能被捕获在其范围模式。
您可以使用类似如下:
var modal = document.getElementById('myModal_'+slider_counter2);
var btn = document.getElementById('modalopener_'+slider_counter2);
var span = document.getElementById('modal_close_btn_'+slider_counter2);
btn.onclick = btn_onclick(modal);
span.onclick = span_onclick(modal);
window.onclick = window_onclick(modal);
这是工作的代码,但不是一个好的解决方案,因为它是一个重复的代码。您可以使用jQuery或其他事件处理库/包来处理更便宜的事件。
嘿你的答案正在工作...唯一的事情是第二个功能应该是没有...(关闭窗口)...仍然试图找出如何关闭如果点击任何地方以外的任何地方模式...什么将是一个更好的方式来做到这一点...(ajax调用)..我认为ajax调用会在服务器上的数据已经存在的查询时不必要的负载...你认为什么... .. – DragonFire
@DragonFire一般的模态看起来很简单,但他们需要做几件事情,比如关闭动作。大部分东西都需要样式表和良好的html结构以实现可重用性。可能你可以找到一些创建模态教程。简单的方法是,grep一些很酷的模式库,如果它是一个选项。 – Edward
你是否认为应该这样做http://*.com/questions/41130223/display-jssor-slider-inside-a-modal-window – DragonFire
好的...我已经把我的问题的简化版本放在这里,我需要把一个滑块插入我的模态..滑块将从每个从PHP接收的数据“行”获得6个图像while while循环...你可以指导我,我正在使用jssor循环,请看看这个...这里的代码工作正常,没有模式,http://*.com/questions/42157315/loading-images-into-jssor-slider - 从一个while循环 – DragonFire