Unable to call a modal from another modal in Bootstrap PHP

Question

I have a 2 bootstrap modals that is currently not working. 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 . 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

Answer 1

Best way is to extend bootstrap modal with this plugin

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

Because i didnt menage to call modla inside modal in core bootstrap, i have to extended it.

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/