Фоновые изображения прыгают при открытии модального - PullRequest
Новая
       33

Фоновые изображения прыгают при открытии модального

0 голосов
/ 18 сентября 2018

Я создаю страницу с эффектом параллакса и галерею изображений, используя Bootstrap 4. Проблема заключается в том, что фоновое изображение скачет / изменяет размер, когда я открываю модальное окно, и я чувствую, что пытался сделать все, чтобы это исправить.BS хорошо держит все остальные элементы там, где они есть, с полосой прокрутки или нет, но не фоновое изображение.

<</p> 

// call ekko-lightbox
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
  event.preventDefault();
  $(this).ekkoLightbox();
});
body {
  position: relative;
  font-size: 100%;
}

body,
html,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: "Lato", sans-serif;
  line-height: 1.8;
}

body,
html {
  height: 100%;
  color: #666666;
}

.bgimg-1 {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-color: black;
  background-image: url("https://cdnb.artstation.com/p/assets/images/images/005/540/665/large/thorsten-erdt-nami-small.jpg?1491824822");
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">

<body>
  <header class="container-fluid h-100 bgimg-1" id="home">
    <div class="row h-100 justify-content-center align-items-center">
      <div class="col col-sm-auto text-white text-center">
        <h2 class="d-md-none">ART OF</h2>
        <h2 class="bg-dark d-block">THORSTEN ERDT</h2>
        <h2 class="d-none d-md-block">ILLUSTRATION</h2>
      </div>
    </div>
  </header>

  <section class="container" id="editorial">
    <div class="row justify-content-center">
      <a href="IMG" data-toggle="lightbox" data-gallery="img-gallery"><img src="thumbnail" alt="captiontext1" style="width:50px"></a>
    </div>
  </section>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>

Если я установлю 

background-size:{auto;}
background-position: {left top;}

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

Если я установлю 

overflow-y:{scroll;}

, он все равно добавляет отступы ко всему, что приводит к тому, что все прыжки ... 

body.modal-open {padding:0;}

исправляет это, но теперь панель навигацииэто единственное, что прыгает.Да, и, конечно, я могу прокручивать страницу, пока модал тоже открыт.

Если у кого-то есть другая идея, как это исправить, я весь в ушах.

1 Ответ

0 голосов
/ 19 сентября 2018

Когда вы открываете bootstrap-modal, он удалит вертикальную прокрутку, если у вас есть, так что вы чувствуете, что ваше фоновое изображение прыгает.И это особенность.

Если вы хотите переопределить его css, вы можете добавить следующий код в конце вашего css. 

 .modal-open {
   overflow-y: inherit;  
 }

Лучше использовать overflow-y : inherit вместоиспользуя overflow-y : scroll, как описано ниже: 

 .modal-open {
   overflow-y: scroll;  
 }

Смотрите, это работает в Демо

Редактировать: 

 .modal-open{
  padding:0 !important;
  overflow-y: auto;
 }

Добавьте приведенный выше код в свой CSS.и все твои проблемы решены.Для более подробной информации: Нажмите меня

Надеюсь, что это решение будет работать для вас.Если у вас есть какие-либо сомнения, оставьте комментарий в разделе комментариев.

...