CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
user3649256
user3649256

Reputation:

Close modal if a button inside is clicked

I wanted to do is single page form switch with the help of modal dialog in bootstrap.

My problem is when i click the button in modal dialog the the modal dialog wont close but the form switch is successfully switched... Does anyone know how to to make the modal dialog close if i clicked any of the button in the modal?

HTML of modal dialog:

<a data-toggle="modal" href="#myModal">Click me</a></li>

<div class="container">
  <div class="row">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-body">
           <form class="form-horizontal">
             <div class="form-group">
               <div class="col-sm-offset-2 col-sm-10">
                 <button type="button" id="show_first" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">First</button>
                 <button type="button" id="show_second" class="btn btn-info" data-dismiss="modal" aria-hidden="true">Second</button>
               </div>
             </div>
           </form>
          </div>
       </div>
     </div>
   </div>
 </div>
</div>

<div class="container">
  <div class="myFirst">
    <div class="row">
      <center>
        <h1>First Page</h1>
      </center>
    </div>
  </div>
  <div class="mySecond">
    <div class="row">
      <center>
        <h1>Second Page</h1>
      </center>
    </div>
  </div>        
</div>

script:

<script type="text/javascript">
    $(function(){
        $('.myFirst').hide();
        $('.mySecond').hide();
        $('#show_first').click(function(){
            $('.mySecond').hide();
            $('.myFirst').show();
            return false;
        });
        $('#show_second').click(function(){
            $('.myFirst').hide();
            $('.mySecond').show();
                return false;
        });
    });
</script>

Upvotes: 1

Views: 5295

Answers (1)

Andy
Andy

Reputation: 4778

As stated in the comments, in bootstrap you can call .modal('hide') to close your modal window, so you can add it to you bound click events like so:

$('#show_first').click(function(){
    $('.mySecond').hide();
    $('.myFirst').show();
    $('.modal').modal('hide');
    return false;
});

$('#show_second').click(function(){
    $('.myFirst').hide();
    $('.mySecond').show();
    $('.modal').modal('hide');
    return false;
});

Upvotes: 2

Related Questions