防止模式滚动 [英] Prevent modal from scrolling

问题描述

我陷入了一个问题，即我创建了一个模态，该模态占据了整个高度和宽度，但是它可以滚动.由于模式停留在上方，并且用户可以与页面的不同部分进行交互，因此破坏了应用程序.

I am stuck on a problem where I've created a modal that occupies the complete height and width, but it scrollable. This breaks the application since the modal stays above and the user can interact with different parts of the page.

模式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;
  }
}

我尝试了overflow: hidden，position: fixed和position: sticky，但是似乎没有任何效果.帮助将不胜感激.

I have tried overflow: hidden, position: fixed and position: sticky, but nothing seems to work. Help would be appreciated.

推荐答案

模式是只是一个弹出对话框，其中:(a)弹出其他内容的顶部，并且(b )通常会阻止您与基础页面进行交互，直到该页面关闭为止. (也称为 灯箱 )

A modal is just a pop-up dialog box that: (a) pops-up overtop of other content, and (b) usually prevents you from interacting with the underlying page until it is closed. (Also known as a lightbox )

这是我做一个简单的模式的方法，该模式可以防止用户继续与视口(在下面工作的DEMO)进行交互.

Here's how I do a simple modal that prevents user from continuing to interact with viewport (working DEMO below).

该模式由两部分组成:(a)一个覆盖页面内容并阻止用户进行交互的覆盖图，以及(b)位于该覆盖图顶部的对话框.

The modal is comprised of two parts: (a) an overlay, that covers the webpage content and prevents user from interacting, and (b) the dialog, which sits on top of the overlay.

(1)覆盖:使用position:fixed并位于页面内容(z索引)上方；

(1) OVERLAY: use position:fixed and sits above the page content (z-index);

(2)对话框:使用position:fixed并将其放在叠加层上方(再次是z-index).

(2) DIALOG: use position:fixed and sit it above (z-index again) the overlay.

我还使用vw或百分比单位来设置叠加层/对话框的大小，因此可以容纳不同的屏幕尺寸.

(3)显示模式时，请执行以下操作:

(3) When displaying modal, do this:

1. 一起显示叠加层和对话框. z-index将它们放置在页面内容上方，并阻止用户单击任何内容- 但是，用户仍然可以滚动页面

1. Show overlay and dialog, together. The z-index places them above the page content and prevents the user from clicking anything - however, the user can still scroll the page

将类添加到您的主容器(或主体?)中

Add class to your main container (or to the body?) that:

(a)将overflow-y设置为hidden-这将隐藏垂直滚动条( 用户无法再滚动页面 )

(a) sets overflow-y to hidden - this hides the vertical scrollbar (user can no longer scroll the page) Comment that out and watch what happens.

(b)隐藏垂直滚动条时，页面将变大.因此，我们添加了一些CSS来缩小容器(body?)的宽度，以使隐藏的滚动条时丢失的滚动条不会导致页面 jump (再次注释掉该部分，然后观看！ )

(b) When the vertical scrollbar is hidden, the page will grow larger. So we add some css that narrows the container (body?) width just enough so the missing scrollbar doesn't cause the page to jump when the scrollbar is hidden (again, comment that part out and watch!)

这是一个jsfiddle ，它可以让您玩耍，评论事物，等等.

Here's a jsfiddle that will let you play around, comment things out, etc.

嵌入式演示:

$('#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>

这篇关于防止模式滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！