Bootstrap Modal не отображается

Я пытаюсь создать простой интерфейс с Bootstrap. У меня небольшая страница с несколькими вещами. Он работает отлично, но потом я хотел добавить к нему модальный элемент. Я привел пример непосредственно со второго bootstrap example. Но когда я пытаюсь использовать его, появляется только тень, которая, потому что кнопки не появляются, я не могу выйти из нее. Почему я не могу заставить модальный работать?Bootstrap Modal не отображается

Начальный код:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
     <!-- Bootstrap --> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery.js"></script> 

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 

     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
<div class="container"> 
    <div class="row border-top-bottom"> 
     <div class="col-sm-1"> 
     <h5>WEEK 1</h5> 
     </div> 
     <div class="col-sm-2 border-right">  
      <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 
      <a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="http://placehold.it/50x50"></a> 
      <p><a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="http://placehold.it/50x50"></a></p> 
     </div> 
     <div class="col-sm-6"> 
      <div class="panel panel-info"> 
       <div class="panel-heading"> 
        <h3 class="panel-title">This weeks project tittle</h3>     
       </div> 
       <div class="panel-body"> 
        <p>Project description: ba nananananana nananananana nananananana nananana nana batman!</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
    <script> 
    $('.btn').popover(); 
</script> 
    </body> 
</html>

Добавлен код модальный:

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

<!-- Modal --> 
<div id="myModal" class="modal hide fade" 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">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </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>

источник

2013-12-13 EasilyBaffled

В вашем модальной коде yyou есть class="modal hide fade" Я не уверен, что hide часть для. Я думаю, что это из старой версии, и вы используете более новую версию?

Это предотвратило отображение фактического модального окна. Тем не менее, вот правильный код модального окна, который должен работать нормально.

Replace: 


<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"> 
     ... 
     </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 -->

источник

2013-12-13 16:31:17 andre3wap

Вы пропустили несколько <, но в противном случае это сработало отлично спасибо. – EasilyBaffled

Исправлено. пытался отступом. Пожалуйста. – andre3wap

Вам нужно загрузить файл JavaScript Bootstrap для запуска модальности. Попробуйте добавить bootstrap.min.js файл в вашей голове тега, как это:

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

источник

2013-12-13 16:15:28 Eric

К сожалению неверно скопированные мой код, я его там наверху, это Бесполезный Ничего изменить. – EasilyBaffled

Вы смешиваете бутстрап 2.3 и 3.0. Они несовместимы.

HTML, для модального диалога от начальной загрузки 2.3.2

Попробуйте изменить к этому, и он должен работать:

<div id="myModal" class="modal fade" 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">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </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> 
</div> 
</div>

источник

2013-12-13 16:31:25 filippo

Bootstrap Modal не отображается

ответ

Смежные вопросы