jQuery关闭模态问题

Question

Ok so i have a modal in bootstrap that has the class of show, to have it display on page load. So it has a ender button at the bottom but couldnt get it to close on click

So I now have script that closes if clicks any where on the box but really it only on that button

JS

<script> 
  $('.modal').click(function() { 
    $(this).removeClass('show'); 
    $(this).addClass('hide');
  }); 
</script>

Modal box classes

<div class="modal show"></div>

Button

<button type="button" class="btn btn-primary center-block click" style="font-size: 20px;" onClick='changeClass'">ENTER</button>

Any help would be great!

Answer 1

This doesn't work that way. You only have to $('.modal .close').modal("hide");

.close being the class for your close button.

Or you can add attribute data-dismiss="modal" to close button.

Ref: http://getbootstrap.com/javascript/#modals-methods

Answer 2

If you are using bootstrap you can do this to close and show a modal:

$('.modal').modal('toggle');

Check out the documentation here .

Also note that bootstrap has an out of the box close button (which you need to include inside your modal) to handle this behavior:

<button type="button" class="close" data-dismiss="modal">x</button>