无法从引导 PHP 中的另一个模态调用模态

Unable to call a modal from another modal in Bootstrap PHP

本文关键字：模态 另一个 调用 PHP      更新时间：2023-09-26

我有一个 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

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

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/

相关文章：