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

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 2

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

Answer 3

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 4

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 5

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 6

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.