Question

我有一个目前无效的2个引导模态。当我点击我的图像时，整个屏幕只显示灰白，没有显示模态对话框。我想从第一个模态窗口调用另一个模态窗口。

第一个模态窗口#test的含义，我需要调用#myModal2。现在问题是，一旦我添加了第二个模态，第一个模态就不会出现。有什么帮助吗？

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

Answer 1

最好的方法是使用此插件扩展bootstrap模式

https://github.com/jschr/bootstrap-modal/

因为我没有在核心引导程序中调用模态中的modla，所以我必须扩展它。

以下是如何使用它的示例

<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>

这是工作小提琴 http://jsfiddle.net/52VtD/9123/

无法在Bootstrap PHP中调用另一个模态的模态

1 个答案: