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:

Answer 1

e.preventDefault(); with jquery ui

For me this problem occured with the click method override on a jquery ui button, causing a page reload on click by default.

Answer 2

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>

Answer 3

Yet another cause/solution! I had in my JS code:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

But my HTML code was already written as:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

So this is another permutation of how duplication entered the code and caused the modal to open then close. In my case, data-target and data-toggle in html as per Bootstrap docs already trigger the modal to work. The JS code is therefore redundant, and when removed, it works.

Answer 4

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 5

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 6

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.