Javascript模式 - 禁用主体滚动但启用带有css的模态

时间：2017-02-28 09:37:41

标签： javascript jquery html css

我为我的模态窗口创建了这个html代码

$("button").click(function(e){
  e.preventDefault();
  $(".wrap-fadeOut").fadeIn(800);
  $('html').css('overflow', 'hidden');
  $('body').bind('touchmove', function(e) {
      e.preventDefault()
  });
});
img {
  display: block;
}
.wrap-fadeOut {
  position: fixed;
  height: 100%;
  width: 100%;
  background: black;
  z-index: 999;
  top: 0;
  left: 0;
  display: none;
}
.modal {
  margin: 2em auto;
  background: white;
  width: 50%;
  border-radius: 5px;
  padding: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Show modal</button>
<div class="wrap-fadeOut">
<div class="modal">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img src="https://s-media-cache-ak0.pinimg.com/736x/90/c1/33/90c133d504c043c904215de79fc3c892.jpg" alt="">
<img src="https://s-media-cache-ak0.pinimg.com/736x/90/c1/33/90c133d504c043c904215de79fc3c892.jpg" alt="">
<a href="#" class="button closeModal">Button</a>
</div>
</div>

我应该怎样做才能禁用身体滚动，但仍保持滚动.modal？我更喜欢CSS解决方案，但jQuery / javascript也很受欢迎。

3 个答案:

答案 0 :(得分：0)

方法1

在调用模态时，将overflow-y: hidden添加到body。

$("button").click(function(e){
  e.preventDefault();
  $(".wrap-fadeOut").fadeIn(800);
  $('body').css('overflow-y', 'hidden');
  $('body').bind('touchmove', function(e) {
      e.preventDefault()
  });
});

然后您需要在关闭模式时从overflow-y删除body属性。

$(".closeModal").click(function() {
    $('body').css('overflow-y', 'auto');
    $(".wrap-fadeOut").fadeOut(800);
});

方法2

或者，你可以创建一个像

这样的CSS类 
.hideScroll {
  overflow-y: hidden;
}

并在模态打开时将css类添加到正文中，并在模态关闭时将其删除。

$("button").click(function(e){
  e.preventDefault();
  $(".wrap-fadeOut").fadeIn(800);
  $('body').addClass("hideScroll");
  $('body').bind('touchmove', function(e) {
      e.preventDefault()
  });
});

$(".closeModal").click(function() {
  $('body').removeClass("hideScroll");
  $(".wrap-fadeOut").fadeOut(800);
});

注意：要启用模态滚动，请将其设置为固定高度＆amp;提供overflow-y: auto 

.modal {
  height: 300px; /* customise as per the height required */
  overflow-y: auto
}

答案 1 :(得分：0)

只需在模型类

中添加此css即可 
.model{
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

您可以添加显示模型div所需的最大高度...您还可以提供600px高度和溢出y：自动模型div其余所有代码都可以。

答案 2 :(得分：0)

结帐此代码段

$("button").click(function(e){
  e.preventDefault();
  $(".wrap-fadeOut").fadeIn(800);
  $('html').css('overflow', 'hidden');
  $('body').bind('touchmove', function(e) {
      e.preventDefault()
  });
});


$(".closeModal").click(function(e){
  e.preventDefault();
  $('html').css('overflow', 'auto');
  $(".wrap-fadeOut").fadeOut(800);
});
img {
  display: block;
  max-width: 100%;
}
.wrap-fadeOut {
  position: fixed;
  height: 100%;
  width: 100%;
  background: black;
  z-index: 999;
  top: 0;
  left: 0;
  display: none;
}
.modal {
  margin: 2em auto;
  background: white;
  width: 50%;
  border-radius: 5px;
  padding: 1em;
  overflow-x: auto;
  height: 90%;
}
.content {
  height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Show modal</button>

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>

<div class="wrap-fadeOut">
<div class="modal">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<img src="https://s-media-cache-ak0.pinimg.com/736x/90/c1/33/90c133d504c043c904215de79fc3c892.jpg" alt="">
<img src="https://s-media-cache-ak0.pinimg.com/736x/90/c1/33/90c133d504c043c904215de79fc3c892.jpg" alt="">
<a href="#" class="button closeModal">Button</a>
</div>
</div>

相关问题
最新问题