La modale Bootstrap disparaît immédiatement

Question

Je travaille sur un site web utilisant bootstrap.

En gros, je voulais utiliser une modale sur la page d'accueil, appelée par le bouton de l'unité de héros.

Code du bouton :

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

Code modal :

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

Le problème est que dès que je clique sur le bouton, la modale s'affiche puis disparaît immédiatement.

J'apprécierais toute aide.

Par ailleurs, comment changer la couleur du triangle de la liste déroulante (pointant vers le haut, sans survol) ? Je travaille sur un site web basé sur l'orange et le marron et ce truc bleu est vraiment ennuyeux.