Итак, я использую Twitter Bootstrap, и у меня есть модальный, который скользит вниз, когда пользователь нажимает кнопку "Зарегистрироваться".
Единственная проблема заключается в том, что фоновая страница не только исчезает, что является хорошим эффектом, но модально также исчезает. Как я могу получить его так, чтобы модальная нормальная яркость, когда фон затухал?
Я создал JSFiddle, чтобы продемонстрировать свою проблему здесь: http://jsfiddle.net/jononomo/7z8RZ/7/
Следующий код создает выцветший модальный:
<div class="navbar navbar-fixed-top">
<a href="#registration_modal" data-toggle="modal">
Register
</a>
<div id="registration_modal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Register An Account</h3>
</div>
<div class="modal-body">
Registration form goes here.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button class="btn btn-primary">Register</button>
</div>
</div>
</div>
Примечание: если я удалю внешний div, тогда все будет хорошо. Таким образом, проблема в том, что код модальности находится в следующих строках:
<div class="navbar navbar-fixed-top">
</div>
Конечно, я не хочу удалять этот div, так как я хочу, чтобы кнопка, которая запускает модальный, находится в навигационной панели, которая фиксируется в верхней части экрана.
Изменить. Я сузил его до того, что внешний div имеет класс navbar-fixed-top
. Когда я удаляю этот тег, все работает так, как ожидалось - вы можете видеть, что он работает правильно здесь: http://jsfiddle.net/jononomo/7z8RZ/8/ Конечно, я бы хотел, чтобы navbar чтобы быть зафиксированным на вершине, так что это не решает мою проблему.