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

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 2

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 3

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 4

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 5

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 6

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.