bootstrap modal не работает должным образом

Я пытаюсь реализовать модальное всплывающее окно на сайте с помощью бутстрапа. Сайт является ведомственным, поэтому единственным кодом, к которому я получил доступ, является основной состав сайта (все остальное в php включает в себя заголовок, нижний колонтитул и навигацию). У меня есть файл bootstrap.js, а также JQuery. Я использую код примера в документах bootstrap. У меня есть всплывающие подсказки bootstrap и popovers, но они не могут понять, почему модальность не будет работать.bootstrap modal не работает должным образом

<!-- Button to trigger modal --> 
<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>

При нажатии на кнопку, страница получает backdropped, но единственное, что в модальный диалог находится панель навигации (я не имею доступа к коду для этого) и модальное диалоговое окно в моем коде (#myModal) вообще не отображается. Я понятия не имею, что происходит. Это один из моих первых проектов веб-разработки.

Я хочу кнопку модальный быть после выбора в форме

<select class="bootstrap-select" name=display> 

    <?php foreach ($digitalSignageDisplays as $display) { ?> 

     <option value=<?php echo $display; ?>><?php echo $display; ?></option> 

    <?php } ?> 

</select>

Любая помощь будет высоко оценен. Может ли это быть проблемой Z-индекса?

источник

2013-11-01 Stone Preston

Я думаю, что вам не хватает 'атрибут данных, target' на кнопке, как это:' данных целевой = "# myModal" ' –

Вы загрузки в JavaScript для бутстрапа? Вы также хотите изменить 'x' на' × ' – Andrew

@JasonSperske У него установлен' href' '# myModal'. Я не думаю, что вам нужна «цель данных». Похоже, он просто скопировал/вставлял код из документации. – Andrew

Убедитесь, что вы не забудьте обернуть модальный-заголовка, модальный-тело и модальный колонтитул с <div class="modal-dialog"> и <div class="modal-content">

<!DOCTYPE html> 
<html> 
    <head> 

    <link href="D:/install/bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/> 

    </head> 
<body> 

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

<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><!-- ./modal-header --> 


      <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><!-- ./modal-content --> 

    </div><!-- ./modal-dialog --> 

</div><!-- ./modal --> 

<script type="text/javascript" src="D:/install/bootstrap-3.0.0/assets/js/jquery.js" ></script> 
    <script type="text/javascript" src="D:/install/bootstrap-3.0.0/dist/js/bootstrap.min.js" > </script> 
</body> 
</html>

источник

2013-11-06 21:18:34

вы можете удалить только класс скрыть от «модального скрыть замирания» и добавить только модальный - контент. Оставшийся ваш код совершенен.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

источник

2016-01-07 05:52:40

bootstrap modal не работает должным образом

ответ

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