Well, the title says it all. I have a default (copied from Bootstrap docs) modal which opens using $('#myModal').modal(); but under no circumstances the modal closes with the dismiss X or cancel button. Console doesn't log any errors. When I press ESC or at any point in the gray transparent overlay it does get closed.

For the sake of being sure I've disabled all other javascript code in my project. I've been staring at this for an hour now. What am I missing? Have done this many times before but I'm baffled with this behavior...

Well, the title says it all. I have a default (copied from Bootstrap docs) modal which opens using $('#myModal').modal(); but under no circumstances the modal closes with the dismiss X or cancel button. Console doesn't log any errors. When I press ESC or at any point in the gray transparent overlay it does get closed.

For the sake of being sure I've disabled all other javascript code in my project. I've been staring at this for an hour now. What am I missing? Have done this many times before but I'm baffled with this behavior...

• javascript
• twitter-bootstrap-3
• modal-dialog

5 Answers 5

This information will be useful for some of us. The newer version of Bootstrap, like v5, has a minor feature without which the button(Close) or (X) is not closing the Modal. You just need to add -bs to the data-dismiss attribute.

<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

I've just found that with bootstrap 4 if you create a modal with javascript and add it to the document to display it it doesn't set any listener events for the data-dismiss action, so have had to do it myself:

$('#modalId').on('click', 'button.close', function (eventObject) {
    $('#modalId').modal('hide');
});

Check if you have data-dismiss attribute as follows

In X icon

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

Close Button

<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

If you have them, please copy and paste your code that might help to identify what is causing the problem

Does the close button have data-dismiss="modal" ?

From bootstrap:

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

You could try to toggle or hide manually,

$('#myModal').modal('hide')

Well, after I was sure I'd ruled any external factor out I tried using the bootstrap javascript file from BootstrapCDN. rather than my pulled in version using poser. You know what? There was a bug in my pulled in version causing this behavior...