0

Есть модальное окно 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>

1 ответ 1

1

Вот решение. Далеко не копал, но чисто по логике видимо сначала отменяются стили, а потом применяются через классы, поэтому мимолётно появляется скролл. Или функционал самого Bootstrap ковырять или сделать вот так, через добавление в style. ;) Проверяйте в полноэкранном режиме.

$('#newModal').on('show.bs.modal', function(e) {
   $("body").css({
   "overflow": "hidden"
   })
});
$('#newModal').on('hide.bs.modal', function(e) {
   $("body").css({
   "overflow": "auto"
   })
});
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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.