Предотвратить модальную прокрутку

Question

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

Модальный HTML

<div id="cancel_modal" class="card__modal">
  <div class="card__modal-container">
    <h5>Are you sure you want to cancel?</h5>
    <p>All information will be deleted</p>
    <div class="card__btn-container">
      <button id="cancel_modal_yes" class="btn btn-danger">Yes</button>
      <button id="cancel_modal_no" class="btn">No</button>
    </div>
  </div>
</div>

Модальный CSS

card__modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, .4);
  z-index: 99;
  height: 100%;
  width: 100%;
  text-align: center;

  &-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 2rem 5rem;
  }
}

Iпробовал overflow: hidden, position: fixed и position: sticky, но, похоже, ничего не работает.Помощь будет оценена.

Answer 1

Модальным является просто всплывающее диалоговое окно, в котором: (a) всплывающее окно поверх другого содержимого, и (b) обычно не позволяет вам взаимодействовать с базовой страницей, пока она не будет закрыта. (также известный как лайтбокс )

Вот как я делаю простой модальный режим, который не позволяет пользователю продолжатьвзаимодействовать с окном просмотра (рабочий демо ниже) .

Модальный состоит из двух частей: (a) оверлей, который покрывает содержимое веб-страницы и предотвращает взаимодействие пользователя, и (b)диалоговое окно, которое находится поверх наложения.

(1) OVERLAY: используйте position:fixed и располагается над содержимым страницы (z-index);

(2) DIALOG: используйтеposition:fixed и расположите его над (снова z-index) наложением.

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

(3) При отображении модального режима сделайте следующее:

1. Показать наложение и диалог вместе. z-index размещает их над содержимым страницы и не позволяет пользователю нажимать что-либо - , однако пользователь все равно может прокручивать страницу

2. Добавьте класс в ваш основной контейнер (или в тело?), Который:

   (a) устанавливает overflow-y в hidden - это скрывает вертикальную полосу прокрутки ( пользователь больше не может прокручивать страницу ) Прокомментируйте это и посмотрите, что произойдет.

   (b) Когда вертикальная полоса прокрутки скрыта, страница увеличится.Таким образом, мы добавляем CSS, который сужает ширину контейнера (тела?) Настолько, чтобы отсутствующая полоса прокрутки не вызывала скачка , когда полоса прокрутки скрыта (снова закомментируйте эту часть и смотрите!)

Вот jsfiddle , который позволит вам поиграть, закомментировать вещи и т. Д.

EMBEDDED DEMO:

$('#btnModl').click(function(){
  //$(this).hide(); //not necc - hides the button you clicked
  $('#olay, #modl').fadeIn();
  $('body').addClass('modl_active');
});

$('#modl_x').click(function(){
  $('body').removeClass('modl_active');
  $('#olay, #modl').fadeOut();
  //$('#btnModl').fadeIn();
});

#olay{position:fixed;width:100vw;height:100vh;z-index:998;}
#modl{position:fixed;top:10vw;left:30vw;width:40vw;height:50vh;z-index:999;}

#modl_x{padding:0 10px;text-align:right;color:white;}
#modl_x:hover{cursor:pointer;}

#olay{background:black;opacity:0.5;display:none;}
#modl{background:darkcyan;color:pink;display:none;}

.modl_active{overflow-y:hidden;width:90vw;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="olay"></div>
<div id="modl">
  <div id="modl_x"> x </div>
  <div><br>Once upon a midnight dreary<br>While I pondered weak and weary<br>Over many a quaint and curious<br>bit of css and javascript...</div>
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p><button id="btnModl">OPEN MODAL</button></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>