[英]Unable to call a modal from another modal in Bootstrap PHP
I have a 2 bootstrap modals that is currently not working. 我有2个引导程序模式,目前无法使用。 When I click on my image, the whole screen just greys out with no modal dialog box showing up.
当我单击图像时,整个屏幕显示为灰色,没有显示任何模式对话框。 I want to call another modal window from the first modal window.
我想从第一个模态窗口调用另一个模态窗口。
Meaning from first modal window #test
, I need to call #myModal2
. 从第一个模态窗口
#test
含义,我需要调用#myModal2
。 Now the problem is the first modal isn't showing up at all once I added the second modal. 现在的问题是,一旦添加了第二个模态,第一个模态就根本不显示。 Any help please ?
有什么帮助吗?
if ($result = mysqli_query($connection,$sql)){
while ($row=mysqli_fetch_assoc($result)){
$formatted_name = str_replace(" ", "", $row['fname']);
echo '<a href="#test" data-toggle="modal"> <img src='.$row['fpics']." alt = '' class='img-thumbnail height='200px' width='200px' ></img></a>";
?>
<div id="test" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One modal body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<a href="#myModal2" role="button" class="btn" data-toggle="modal">Launch other modal</a>
</div>
</div>
<div id="myModal2" class="modal hide fade" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal 2 header</h3>
</div>
<div class="modal-body">
<p>Two modal body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
<?php
}//while bracket
}//if bracket
Best way is to extend bootstrap modal with this plugin 最好的方法是使用此插件扩展引导程序模态
https://github.com/jschr/bootstrap-modal/ https://github.com/jschr/bootstrap-modal/
Because i didnt menage to call modla inside modal in core bootstrap, i have to extended it. 因为我没有想到要在核心引导程序中的模态内部调用modla,所以我必须对其进行扩展。
Here is example how to use it 这是示例如何使用它
<button class="demo btn btn-primary btn-lg" data-toggle="modal" href="#responsive1">View Demo</button>
<div id="responsive1" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Responsive</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h4>Modal 1</h4>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" data-toggle="modal" href="#responsive2" class="btn btn-danger">Launch another modal</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<div id="responsive2" class="modal fade" tabindex="-1" data-width="760" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Responsive</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<h4>Modal 2</h4>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>
Here is working fiddle http://jsfiddle.net/52VtD/9123/ 这是工作提琴http://jsfiddle.net/52VtD/9123/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.