Bootstrap modal doesn't close with 'x' after opening a second time

Question

So I have this issue where after I open a modal, close it(by either clicking the 'x' or the background overlay). The second time I open the modal, it only closes by clicking on the background overlay and closing by clicking on the 'x' does not work.

Below is my code for the modal:

      <div class="modal fade in" id="whatModal" aria-hidden="true">
          <div class="modal-content col-md-offset-4 col-md-4">
              <div class="modal-header">
                <div class="close glyphicon glyphicon-remove" data-dismiss="modal" data-target="#whatModal"></div>
                <h3>Modal header</h3>
              </div>
              <div class="modal-body">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat dui ipsum, in laoreet eros porttitor non.</p>
              </div>
          </div>
      </div>

Oh, I'm using Bootstrap 3 by the way.

Any help is greatly appreciated after banging my head against the wall for the past few hours.

Answer 1

I cannot give you a particular answer without having some log information form the console, but looking at the bootstrap documentation, I put a quick demo together. You can check the result and the snippet online

Answer 2

This was a known issue... https://github.com/twbs/bootstrap/issues/9362

And was fixed in this commit... https://github.com/twbs/bootstrap/commit/712b89ed4ebe71e44f2a7081be7ba372d8ca3f42#js/modal.js

In the above commit you can see that the data-dismiss click event handler was added in the constructor, but then detached on hide - and not re-atached on show, the fix was to move the 'click.dismiss.modal' was moved into the show function.

I can confirm this version fixed the issue for me.

The fix has made it into the full V3.0.0 release https://github.com/twbs/bootstrap/blob/v3.0.0/js/modal.js

So i suspect updating to that version should resolve it for you.