Twitter-bootstrap Модальный, не отображающийся при загрузке страницы (серый экран)

Question

Я пытаюсь, чтобы модальное диалоговое окно twitter-bootstrap отображалось при загрузке страницы для определенного вида. Я делаю это с помощью кода:

<script> 
$(window).load(function(){ 
     $('#shareModal').modal('show'); 
    }); 
</script> 

<div class="modal hide fade" id="shareModal"> 
    <div class="modal-header"> 
    <a class="close" data-dismiss="modal">×</a> 
    <h3>Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <a href="#" class="btn">Close</a> 
    <a href="#" class="btn btn-primary">Save changes</a> 
    </div> 
</div> 

При загрузке страницы, вместо модального выскакиваю, экран появляется «неактивен» из (утрачено) и ничего не появляется. Кто-нибудь знает, что может быть? Спасибо.

Answer 1

Хммм, Я думаю, что вы должны попробовать это с Bootstrap 3:

<div class = "modal fade" id="shareModal" role = "dialog"> 
    <div class = "modal-dialog"> 
     <div class = "modal-content"> 
      <div class="modal-header"> 
       <a class="close" data-dismiss="modal">×</a> 
       <h3>Modal header</h3> 
      </div> 
      <div class="modal-body"> 
       <p>One fine body…</p> 
      </div> 
      <div class="modal-footer"> 
       <a href="#" class="btn">Close</a> 
       <a href="#" class="btn btn-primary">Save changes</a> 
      </div> 
     </div> 
    </div> 
</div> 

в консоли вашего браузера наберите: $ ('# shareModal') модальный();. чтобы проверить свою модальную

Answer 2

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     One fine body… 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

JS

$(window).load(function(){ 
     $('#myModal').modal('show'); 
    }); 

DEMO