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

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.