Почему модальное окно становится скрытым после добавления кода CSS? (Бутстрап)
Я создал модальное окно.
Вы можете видеть, что это хорошо работает здесь.
http://www.bootply.com/R3JfdhIPwu
Теперь мне нужно разделить страницу на 2 части — левую и правую, где правая будет исправлена.
.right-main {
position: fixed;
}
Как только я добавил эту строку в css, модальное окно стало скрытым: http://www.bootply.com/aYhMZ3fLlM
У кого-нибудь есть идеи по поводу решения, как сделать его видимым?
Решение
Просто переместите вашу модальную разметку вне из .right-main, Модальное позиционирование обычно не зависит от структуры DOM. Я бы порекомендовал перенести его в нижний колонтитул вашей DOM, так как он не требует немедленной визуализации. Также убедитесь, что он не вложен ни в какие элементы, от которых он может наследовать стили (в этом случае .right-main).
Пример: http://www.bootply.com/QfzMfbTahn
<div class="right-main">
<a class="clickable" style=" text-decoration: none; font-size:100px; border-bottom:2px dashed;" data-toggle="modal" data-target="#basicModal">Test</a>
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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>
<h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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>
</div>
</div>
Другие решения
Других решений пока нет …