twitter bootstrap close Bootstrap Modal выскакивает, но имеет «тонированную» страницу и не может взаимодействовать



bootstrap modal js (6)

Я использую bootstrap для настройки модального всплывающего окна. При нажатии кнопки открывается модальное диалоговое окно, но вся страница слегка «тонируется», и я не могу взаимодействовать с модальным (страница по существу замирает). Вы знаете, почему это будет? Вот код:

кнопка:

<a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Play my city</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">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Congratulations!</h4>
          </div>
          <div class="modal-body">
            <h4>Text in a modal</h4>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

            <h4>Popover in a modal</h4>
            <p>This <a href="#" role="button" class="btn btn-default popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>

            <h4>Tooltips in a modal</h4>
            <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>

            <hr>

            <h4>Overflowing text to show optional scrollbar</h4>
            <p>body</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 -->

РЕДАКТИРОВАТЬ:

Вот включенные файлы:

<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/style.css">
<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/jquery-ui-1.10.1.custom.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">

<link media="all" type="text/css" rel="stylesheet" href="http://crowdtest.dev:8888/assets/CSS/bootstrap.css">

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
<script src="http://crowdtest.dev:8888/assets/js/script.js"></script>
<script src="http://crowdtest.dev:8888/assets/js/jquery-ui-1.10.1.custom.min.js"></script>

<script src="http://crowdtest.dev:8888/assets/js/bootstrap.js"></script>

РЕДАКТИРОВАТЬ: происходит во всех браузерах попробовал (Chrome, Firefox, Safari)


Answer #1

Если вы используете ASP.NET, убедитесь, что вы <asp:Content ContentPlaceHolderID="BottomOfForm" runat="server"> модальный блок div в <asp:Content ContentPlaceHolderID="BottomOfForm" runat="server"> .


Answer #2

Я знаю, что это старый вопрос, но у меня была похожая проблема, и если у кого-то есть то же самое, вот что сработало для меня Убедитесь, что вы включили модальный файл CSS!


Answer #3

Итак, я разобрался с проблемой.

Если модальный контейнер имеет фиксированную позицию или находится внутри элемента с фиксированной позицией, такое поведение будет иметь место.

Самый простой способ - просто переместить модальный div так, чтобы он находился вне каких-либо элементов со специальным позиционированием. Одно хорошее место может быть перед закрывающим тегом body.

Это то, что я сделал, и это сработало.


Answer #4

Я исправил эту проблему, переместив весь модальный html в конец моего файла! Больше ничего не получалось. Только кнопка, чтобы открыть модал находится в остальной части HTML. Это может быть связано с объявлениями тегов body, но у меня нет времени беспокоиться об этом.


Answer #5

Это случилось со мной, и потребовались годы, чтобы поставить диагноз. Если это случится с вами, добавьте это к вашему CSS:

div.modal div.modal-backdrop {
    z-index: 0;
}

РЕДАКТИРОВАТЬ : вам может потребоваться больше специфичности для этого параметра, который будет выбран. Как предполагает Ник Спун, вы можете использовать

body.modal-open div.modal-backdrop { 
    z-index: 0; 
}

И вам может понадобиться добавить больше квалификаторов, в зависимости от того, что делает остальная часть вашего CSS. Вы также можете использовать !important , но это только подметает проблему.


Answer #6

Я столкнулся с этим также и обнаружил, что это точное явление происходит с зависанием экрана после нажатия кнопки, чтобы открыть модал, и обнаружил, что это произошло из-за того, что я случайно удалил.

Когда я добавил закрытие, Модальное Всплывающее окно начало работать снова.





modal-dialog