Bootstrap Modal immediately disappearing

Question

I'm working on a website using bootstrap.

Basically, I wanted to use a modal in the home page, summoned by the button in the Hero Unit.

Button code:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

Modal code:

<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

The problem is that as soon as I click on the button, the modal fades in and then immediately disappears.

I'd appreciate any help.

Also, how to change the dropdown triangle's color (pointing up, no hover)? I'm working on a website based on orange and brown and that blue thing is really annoying.

Answer 1

I came across this issue myself today and it happened to be only in Chrome. What made me realise it might be a rendering issue. Moving the specific modal to it's own rendering layer solved it.

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

Answer 2

In my case, a click on a button causes a (not wanted) reload of the page.

Here is my fix:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

Answer 3

Have you tried removing

data-dismiss="modal"

Answer 4

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.

Answer 5

In my case, I had the CDN included in the head of application.html.erb and also installed the 'jquery-rails' gem, which I am guessing thanks to the documentation and posts above, is redundant.

I simply commented out the CDN (below) from the head of application.html.erb and the modal appropriately stays open.

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

Answer 6

I too had the same issue, but for me it was happening because I had a button with type "submit" within the modal form. I changed

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

to

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

And that fixed the disappearance issue.