[英]Showing modal-box morethan 1 on a page
<< Referring to this thread >> <<引用此线程 >>
I want to make several modal-box on a page: 我想在页面上制作几个模式框:
<script>
var grid_modal_options = {
height: 'auto',
width: '80%',
modal: true
};
function showProducts1ModalBox() {
$("#products1_modal_box").dialog(grid_modal_options);
$("#products1_modal_box").parent().appendTo('form:first');
}
function showProducts2ModalBox() {
$("#products2_modal_box").dialog(grid_modal_options);
$("#products2_modal_box").parent().appendTo('form:first');
}
function showProducts3ModalBox() {
$("#products3_modal_box").dialog(grid_modal_options);
$("#products3_modal_box").parent().appendTo('form:first');
}
</script>
<div id="products1_modal_box" title="Products" style="display: none;">
<div class="in">
<div class="grid-12-12">
<form id="products1_modal_box_form" action="#" method="post">
<table>
<thead>
<tr>
<th> </th>
<th>Product</th>
</tr>
</thead>
<!-- Query for read mysql goes here (I skipped this line because it's not the main thing I'm gonna ask since it's run well) /-->
<tbody>
<?php
//read the results
while($fetch = mysqli_fetch_array($r)) {
print "<tr>";
print " <td><a href=\"javascript:;\" onclick=\"$('#products1_id_textbox').val('".$fetch[0]."');$('#products1_modal_box').dialog('close');\">Choose</a></td>";
print " <td>" . $fetch[0] . "</td>"; //$fetch[0] == Product ID
print "</tr>";
}
?>
</tbody>
</table>
</form>
</div>
</div>
</div>
<div id="products2_modal_box" title="Products" style="display: none;">
<!--
The rest goes here (the same with "products1_modal_box")
except:
print " <td><a href=\"javascript:;\" onclick=\"$('#products2_id_textbox').val('".$fetch[0]."');$('#products2_modal_box').dialog('close');\">Choose</a></td>";
/-->
</div>
<div id="products3_modal_box" title="Products" style="display: none;">
<!--
The rest goes here (the same with "products1_modal_box")
except:
print " <td><a href=\"javascript:;\" onclick=\"$('#products3_id_textbox').val('".$fetch[0]."');$('#products3_modal_box').dialog('close');\">Choose</a></td>";
/-->
</div>
And: 和:
<input type='text' id='products1_id_textbox' name='products1_id_textbox' />
<a href='#' onclick='showProducts1ModalBox(); return false;'>Choose products 1</a>
<input type='text' id='products2_id_textbox' name='products2_id_textbox' />
<a href='#' onclick='showProducts2ModalBox(); return false;'>Choose products 2</a>
<input type='text' id='products3_id_textbox' name='products3_id_textbox' />
<a href='#' onclick='showProducts3ModalBox(); return false;'>Choose products 3</a>
Why this doesn't work? 为什么这不起作用? When I removed the div "products2_modal_box" and "products3_modal_box", the modal-box for div "products1_modal_box" appear, but when I tried to get back all of them, each modal-box doesn't appear while I clicked the link. 当我删除div“ products2_modal_box”和“ products3_modal_box”时,出现了div“ products1_modal_box”的模态框,但是当我尝试取回所有它们时,当我单击链接时,每个模态框都没有出现。 What's wrong with the code? 代码有什么问题? Thanks.. 谢谢..
This doesn't technically answer your question, but I use jQuery Reveal for modals on my site. 从技术上讲,这不能回答您的问题,但是我在我的网站上使用jQuery Reveal作为模态。 Seems a lot easier than what you're trying to do. 似乎比您要尝试的要容易得多。 Here's the source: http://www.zurb.com/playground/reveal-modal-plugin 来源: http : //www.zurb.com/playground/reveal-modal-plugin
It's really easy to set up, and you can have multiple modals per page, and can trigger them with an event (such as a click) or dynamically with jquery. 设置非常容易,并且每个页面可以有多个模式,并且可以通过事件(例如单击)或通过jquery动态触发它们。
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.