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

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 2

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 3

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 4

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 5

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 6

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.