Документально модальный не отображается в Bootstrap

Question

Javascript documentation из Twitter Bootstrap представляет следующий пример:

<div class="modal fade"> 
    <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">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body&hellip;</p> 
     </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 --> 

Однако, я ничего не могу видеть: инструменты разработчика Chrome показывают, что заключая div должен занимать 1140px по 0px. Я также попытался удалить класс fade, но безрезультатно.

У меня пока не было проблем с тестированием других компонентов. Я должен сказать, что я использую CDN для тестирования следующим образом:

<!-- at the end of HEAD --> 
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> 
<!-- at the end of BODY --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js">/script> 

Что может быть причиной этого краха?

Answer 1

.modal скрыт по умолчанию. Вам необходимо включить ссылку, чтобы открыть мод.

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">