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

Had to face the same issue. The reason is same as the @merv. Issue was with a calendar component added to the page.The component itself add the modal feature to be used in the calendar popup.

So the reasons to break model popup will be one or more of the following

• Loading more than one bootstrap js versions/files (minified ...)
• Adding an external calendar to the page where bootstrap is used
• Adding custom alert or popup library to the page
• Any other library which adds popup behavior

Answer 2

I ran into the same symptom that @gpasse showed in his example. Here was my code...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

As @Bhargav suggested, my issue was due to the button attempting to submit the form, and reloading the page. I changed the button to an <a> link as follows:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

...and it fixed the problem.

NOTE: I don't have enough reputation to simply add a comment or upvote yet, and I felt that I could add a little clarification.

Answer 3

I had the same issue too. The problem with me was I was displaying the modal on pressing a link and prompting for confirmation with jquery.

The code below displayed the modal and which dissapeared immediately:

<a href="" onclick="do_some_stuff()">Hey</a>

I ended up adding '#' to href so the link won't go anywhere and it solved my problem.

<a href="#" onclick="do_some_stuff()">Hey</a>

Answer 4

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.

Answer 5

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.

Answer 6

In my case, I had only a single bootstrap.js, jquery.js file included but still getting such type of error, and my code for button was something like this:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

I simple added e.preventDefault(); to it and it worked like charm.

So, my new code was like below:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>