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

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 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.

Answer 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.

Answer 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.

Answer 5

Same symptom, in the context of a Rails application with Bootstrap provided by the bootstrap-sass gem, and @merv's answer put me on the right track.

My application.js file had the following:

//= require bootstrap
//= require bootstrap-sprockets

The fix was to remove one of the two lines. Indeed, the gem's readme warns you about this error. My bad.

Answer 6

My code somehow had the bootstrap.min.js included twice. I removed one of them and everything works fine now.

Answer 7

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 8

The problem can also occurs if using jquery you attach an event listener twice. For exemple you would set without unbinding :

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

If this happens the event is fired twice in a row and the modal disapears.

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

See exemple : http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

Answer 9

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 10

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.

Answer 11

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 12

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 13

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 14

In my case I have use actionlink button in MVC and I have facing this issue, I have tried many solutions above and other, but still facing that issue, then I realize my error in code.

I have called modal in javascript by using

 $('#ModalId').modal('show');

Before the error I using this button

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

I have no value for href property in this button so I facing the issue.

Then I edit this button code like this

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

then issue get solved just an error because of no # in first one.

see if this will helpful to you.

Answer 15

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 16

I had the same problem working on a project with asp.NET. I was using bootstrap 3.1.0 solved it downgrading to Bootstrap 2.3.2.

Answer 17

I too had the issue, if the button is inside a tag then the modal appears once and disappears soon enough, taking the button out of the form fixed the isue. Thanks I ended up in this thread! +1 to all.

Answer 18

I was facing the same problem during testing on mobile devices and this trick worked for me

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

Change the button to anchor tag it should work, the problem occurs due to its type button as it is trying to submit so the modal disappears immediately.and also remove hide from modal hide fade give <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> Hope this would work for you .

Answer 19

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 20

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 21

Have you tried removing

data-dismiss="modal"

Answer 22

I know this is old, but here's another thing to check for - make sure you only have one data-target= attribute. I had duplicated it and the result was as per this thread.

Answer 23

I had added bootstrap to my project via bower, then I imported the bootstrap.min.js file and after the modal.js file. (The button that opens the modal is inside a form). I just remove the import for modal.js and it works for me.

Answer 24

in case anyone using codeigniter 3 bootstrap with datatable.

below is my fix in config/ci_boostrap.php

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

Answer 25

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 26

while working with Angular(5) , i face the same issue , but in my case i solved as follows:

component.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

component.ts

NOTE: need to import jquery in ts file as "declare var $ :any;"

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

Changes i made :

• removed "data-toggle="modal" from Button tag (thanks to @miCRoSCoPiC_eaRthLinG this answer helps me here) in my case its showing modal so i created (click)="showresult()"

• inside component.ts need to declare Jquery($) and inside button click method showresult() call " $('#myModal').modal('show');"

Answer 27

I had the same issue because I was toggling my modal twice as shown below:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

I removed one occurrence of:

$('#myErrorModal').modal('toggle')

and it worked like magic!