Есть модальное окно bootsatrap 4
, которое открывается по кнопке и по задумке внутри тела есть кнопка, которая должна закрывать текущее окно и открывать новое.
По работе все бы хорошо, но во втором случае при открытии второго окна уже не создается класс modal-open
внутри body
и теперь отображается скролл.
Тогда я вручную добавляю класс на состояние окна shown.bs.modal, но проблема в том, что тогда окно раздергивается на мгновение отобразив скролл и затем скрыв.
Как разрешить эту проблему?
Код
$('#newModal').on('shown.bs.modal', function(e) {
$("body").addClass("modal-open");
});
body.modal-open {
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container mt-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aliquam consequuntur quibusdam repudiandae ducimus facilis quos, maiores recusandae exercitationem illo eos nulla omnis numquam, doloremque consequatur vitae, quam ab odio?</p>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary" id="myBtn" data-toggle="modal" data-target="#myModal">Open Modal</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aliquam consequuntur quibusdam repudiandae ducimus facilis quos, maiores recusandae exercitationem illo eos nulla omnis numquam, doloremque consequatur vitae, quam ab odio?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aliquam consequuntur quibusdam repudiandae ducimus facilis quos, maiores recusandae exercitationem illo eos nulla omnis numquam, doloremque consequatur vitae, quam ab odio?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore aliquam consequuntur quibusdam repudiandae ducimus facilis quos, maiores recusandae exercitationem illo eos nulla omnis numquam, doloremque consequatur vitae, quam ab odio?</p>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<button type="button" class="btn btn-primary" id="myBtn" data-dismiss="modal" data-toggle="modal" data-target="#newModal">New Modal</button>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- New Modal -->
<div class="modal fade" id="newModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>