Bootstrap modalny ogień, ale bez wyświetlania - javascript, jquery, twitter-bootstrap, twitter-bootstrap-3

Próbuję użyć modala bootstrap, zdarzenia "show" jest zwolniony, ale nie mogę go zobaczyć na ekranie. home.js

$(document).ready(function(){
console.log("Log...");

$(document).on("click", "#btnSignIn", function(){
console.log("Starting modal..");
$("#modal").on("show.bs.modal", function(){
alert("Modal show..");
}).modal("show");
});
});

modal w home.jsp

<!-- Modal -->
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="false">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<h1>AKA</h1>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>

alert jest uruchamiany, ale wtedy nie jest pokazywany żaden modal. Ktoś może mi pomóc? Proszę

Odpowiedzi:

Jeśli używasz Bootstrap 3, musisz usunąć klasę hide ze swojego modalnego html:

Zmień to:

 <!-- Modal -->
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog"

Do tego:

  <!-- Modal -->
<div id="modal" class="modal fade" tabindex="-1" role="dialog"