Modal inside a modal

Modal inside a modal

by labanino

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-modal.js"></script>
<div class="container">
<a href="#myModal" data-toggle="modal" class="btn btn-large btn-primary"> Create New Gallery </a>
<div class="modal fade hide modal-creator" id="myModal" style="display: none;" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Create New Gallery</h3>
  </div>
  <!--/modal-header-->
  <div class="modal-body"> <a href="#myModal_crop_image" data-toggle="modal"> Open another modal </a> 
    
    <!--other modal-->
    <div class="modal fade hide modal-creator" id="myModal_crop_image" style="display: none;" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" data-target="#myModal_crop_image">×</button>
        <h3>Create New Gallery</h3>
      </div>
      <!--/end header-->
      <div class="modal-body">
        <p>image will go here</p>
      </div>
      <!-- /modal-body -->
      <div class="modal-footer"></div>
    </div>
    <!-- /modal-body -->
    <div class="modal-footer"> 
    <a href="javascript:;" class="btn" data-dismiss="modal">Close</a> <a href="javascript:;" class="btn btn-primary">Next</a> </div>
  </div>
</div>

JavaScript

$(function () {
    $('.btn-navbar').click(function () {
        $('.nav-collapse').toggleClass('show-mobile-nav');
        return false;
    });
});