Bootstrap Modal immediately disappearing

Solution 1:

A Likely Cause

This is typical behavior for when the JavaScript for the Modal plugin gets loaded twice. Please check to make sure that the plugin isn't getting double loaded. Depending on the platform you are using, the modal code could be loaded from a number a sources. Some of the common ones are:

bootstrap.js (the full BootStrap JS suite)
bootstrap.min.js (same as above, just minified)
bootstrap-modal.js (the standalone plugin)
a dependency loader, e.g., require('bootstrap')

Debugging Tips

A good place to start is to inspect the registered click event listeners using the developer tools in your browser. Chrome, for instance, will list the JS source file where the code to register the listener can be found. Another option is to try searching the sources on the page for a phrase found in the Modal code, e.g., var Modal.

Unfortunately, these won't always find things in all cases. Inspecting the network requests can be a little more robust at giving you a picture of everything loaded on a page.

A (Broken) Demo

Here's a demo of what happens when you load both the bootstrap.js and bootstrap-modal.js (just to confirm your experience):

Plunker

If you scroll down to the bottom of the source on that page, you can remove or comment out the <script> line for the bootstrap-modal.js and then verify that now the modal will function as expected.

Solution 2:

I had the same problem but it had a different cause. I followed the documentation and created a button like so:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

When I clicked it, it appeared that nothing would happen. However, the button was in a <form> that was temporarily just fetching the same page.

I fixed this by adding type="button" to the button element, so that it wouldn't submit the form when clicked.

Solution 3:

For me what worked was to remove

data-toggle="modal"

from the button. The button itself can be any element - a link, div, button etc.

Solution 4:

I looked for a while for a duplicate bootstrap reference in my mvc app, after the other helpful answers on this question.

Finally found it - it was included in another library I was using, so wasn't obvious at all! (datatables.net).

If you still get this problem, look for other libraries that might be including bootstrap for you. (datatables.net allows you to specify a download with or without bootstrap - others do the same).

So I removed the bootstrap.min.js from my bundle.config and all worked fine.