Question

在我写这篇文章之前，我已经在下面查看了这个帖子的答案，但仍然无法解决我的问题：

overflow: hidden not working
Overflow hidden not working in FF & IE
Overflow hidden not working on container div
overflow hidden not working, position of parent relative

我一直在我的wordpress网站上工作。当单击模板按钮时，在管理页面下面的叠加层顶部显示模式对话框。单击按钮时出现叠加层。但问题是我无法隐藏滚动条并使其不可滚动。请点击链接查看叠加层（请参阅我的代码段）。如何阻止此滚动条出现并使其不可滚动？感谢。

注意：

我在wordpress管理页面上注册/排队所有样式/脚本 admin_enqueue_scripts hook。
我使用admin_footer hook将div放在<div id="template-container"></div>下面。
div＃template-container的父级是#wpwrap，它来自wordpress本身，位于相对。

＆＃13;

jQuery(function($) {
	$(document).on('click', '#insert-template', function(event) {
	event.preventDefault();
	$('#template-container').css('display','block');	
});
});

＆＃13;

#wpwrap { /* This DIV is from wordpress */
    height: auto;
    min-height: 100%;
    width: 100%;
    position: relative;
    -webkit-font-smoothing: subpixel-antialiased;
}

#template-container {
	display:none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	opacity: 0.9;
	z-index: 100100;
  overflow:hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#" id="insert-template">Link</a>

<div id="wpwrap">
<div id="template-container"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id tincidunt metus. Etiam ut elit volutpat, finibus magna non, tempus velit. Duis malesuada convallis lacinia. Pellentesque consectetur sit amet nibh et dictum. Sed sit amet nulla rhoncus, facilisis quam id, scelerisque ex. Sed sed interdum sapien. Mauris justo est, semper sit amet vulputate nec, ornare quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ante erat, pulvinar vitae lorem et, tempus feugiat dolor. Aliquam libero risus, iaculis sit amet nunc vitae, pellentesque bibendum nisl. Sed tincidunt vitae velit a ultricies. Nullam condimentum vel orci nec pharetra. Praesent rhoncus condimentum purus vel vehicula. Maecenas vel neque id arcu sollicitudin elementum id vel erat.

Mauris nec malesuada arcu. Cras scelerisque et metus tincidunt semper. Vivamus ornare nec lectus id condimentum. Nam nunc arcu, facilisis eu fringilla eget, feugiat eget elit. Nunc augue dui, placerat id maximus vitae, elementum tincidunt purus. Sed facilisis luctus sollicitudin. Ut aliquam arcu vitae lacus efficitur, ut ornare leo ullamcorper. Aliquam scelerisque porttitor libero quis vestibulum. Quisque a justo tellus. In vel varius enim. Etiam a orci in augue maximus mattis.

Integer commodo, ipsum in feugiat eleifend, purus diam congue dolor, gravida pharetra tortor dolor ut urna. Maecenas sed mattis quam. Duis dignissim, nibh at hendrerit pharetra, massa quam auctor velit, id aliquam orci velit et arcu. Vestibulum rutrum nec purus ac sagittis. Pellentesque ullamcorper suscipit orci, nec blandit felis vulputate et. Sed ac tortor sit amet leo sollicitudin efficitur. In semper purus quis magna molestie, et maximus ex sagittis. Aliquam id tortor cursus, semper elit eu, sodales dui. Pellentesque volutpat justo vitae fermentum cursus. Vestibulum lacus quam, efficitur sed posuere sit amet, mollis non augue. Quisque tincidunt hendrerit lorem ac aliquam. Vivamus quis risus interdum leo ullamcorper tempus non eu felis. In imperdiet in magna at tempor. Suspendisse potenti. Proin volutpat lacus a arcu sollicitudin condimentum.

Praesent tristique laoreet risus, ac viverra turpis ornare sit amet. Praesent ut lectus non elit porttitor molestie sed quis nulla. Aliquam non tellus ultricies, rutrum justo non, aliquam ex. Nam vestibulum non metus ac pulvinar. Mauris in fringilla turpis. Praesent posuere, augue vitae semper tincidunt, odio diam malesuada nunc, ut imperdiet eros leo vitae odio. Nulla interdum, justo a iaculis pulvinar, eros sem fermentum nisl, vel sollicitudin odio est ac justo. Morbi congue sollicitudin ligula, vitae viverra urna fringilla ut. Nulla egestas vitae est quis ultrices. Quisque aliquam libero lacus, a tempus neque hendrerit id. Nullam lacus lacus, rhoncus a enim varius, tempor bibendum justo. Etiam sollicitudin diam vitae libero convallis euismod. Cras commodo ante quis massa porttitor suscipit. Nam tincidunt, elit vitae euismod luctus, lorem nulla condimentum lacus, vel congue dolor velit at neque. Nullam eu rhoncus turpis. Duis auctor neque eget egestas posuere.

In id nulla vitae risus egestas dapibus. Mauris id congue nulla. Suspendisse eros nisl, suscipit nec sem ut, porta sodales sapien. Pellentesque id enim porta, suscipit lacus eu, faucibus dui. Curabitur elementum nec nisi vitae sodales. Nulla nec diam nec purus eleifend mattis sit amet ac libero. Pellentesque ut leo ac dui sodales maximus at vel lacus. Aenean at elit massa. Maecenas scelerisque nulla eu mattis laoreet. Pellentesque nec velit condimentum, maximus ex in, tincidunt purus. Sed vulputate vel dolor eget pellentesque. Donec et elit sed magna elementum hendrerit eget id orci. Curabitur eget rutrum ligula. Sed tortor dolor, congue at fermentum a, imperdiet eget leo. Proin at mi posuere ipsum vehicula cursus vitae eu diam.
</p>

＆＃13;

Answer 1

您可以在oveflow而不是容器上设置body属性。例如：

jQuery(function($) {
  $(document).on('click', '#insert-template', function(event) {
    event.preventDefault();
    $('#template-container').css('display', 'block');
    $('body').toggleClass('modal-open');
  });
});

#wpwrap {
  /* This DIV is from wordpress */
  height: auto;
  min-height: 100%;
  width: 100%;
  position: relative;
  -webkit-font-smoothing: subpixel-antialiased;
}

#template-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.9;
  z-index: 100100;
}

.modal-open {
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#" id="insert-template">Link</a>

<div id="wpwrap">
  <div id="template-container"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id tincidunt metus. Etiam ut elit volutpat, finibus magna non, tempus velit. Duis malesuada convallis lacinia. Pellentesque consectetur sit amet nibh et dictum. Sed sit amet nulla rhoncus,
  facilisis quam id, scelerisque ex. Sed sed interdum sapien. Mauris justo est, semper sit amet vulputate nec, ornare quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ante erat, pulvinar vitae lorem
  et, tempus feugiat dolor. Aliquam libero risus, iaculis sit amet nunc vitae, pellentesque bibendum nisl. Sed tincidunt vitae velit a ultricies. Nullam condimentum vel orci nec pharetra. Praesent rhoncus condimentum purus vel vehicula. Maecenas vel neque
  id arcu sollicitudin elementum id vel erat. Mauris nec malesuada arcu. Cras scelerisque et metus tincidunt semper. Vivamus ornare nec lectus id condimentum. Nam nunc arcu, facilisis eu fringilla eget, feugiat eget elit. Nunc augue dui, placerat id maximus
  vitae, elementum tincidunt purus. Sed facilisis luctus sollicitudin. Ut aliquam arcu vitae lacus efficitur, ut ornare leo ullamcorper. Aliquam scelerisque porttitor libero quis vestibulum. Quisque a justo tellus. In vel varius enim. Etiam a orci in
  augue maximus mattis. Integer commodo, ipsum in feugiat eleifend, purus diam congue dolor, gravida pharetra tortor dolor ut urna. Maecenas sed mattis quam. Duis dignissim, nibh at hendrerit pharetra, massa quam auctor velit, id aliquam orci velit et
  arcu. Vestibulum rutrum nec purus ac sagittis. Pellentesque ullamcorper suscipit orci, nec blandit felis vulputate et. Sed ac tortor sit amet leo sollicitudin efficitur. In semper purus quis magna molestie, et maximus ex sagittis. Aliquam id tortor
  cursus, semper elit eu, sodales dui. Pellentesque volutpat justo vitae fermentum cursus. Vestibulum lacus quam, efficitur sed posuere sit amet, mollis non augue. Quisque tincidunt hendrerit lorem ac aliquam. Vivamus quis risus interdum leo ullamcorper
  tempus non eu felis. In imperdiet in magna at tempor. Suspendisse potenti. Proin volutpat lacus a arcu sollicitudin condimentum. Praesent tristique laoreet risus, ac viverra turpis ornare sit amet. Praesent ut lectus non elit porttitor molestie sed
  quis nulla. Aliquam non tellus ultricies, rutrum justo non, aliquam ex. Nam vestibulum non metus ac pulvinar. Mauris in fringilla turpis. Praesent posuere, augue vitae semper tincidunt, odio diam malesuada nunc, ut imperdiet eros leo vitae odio. Nulla
  interdum, justo a iaculis pulvinar, eros sem fermentum nisl, vel sollicitudin odio est ac justo. Morbi congue sollicitudin ligula, vitae viverra urna fringilla ut. Nulla egestas vitae est quis ultrices. Quisque aliquam libero lacus, a tempus neque hendrerit
  id. Nullam lacus lacus, rhoncus a enim varius, tempor bibendum justo. Etiam sollicitudin diam vitae libero convallis euismod. Cras commodo ante quis massa porttitor suscipit. Nam tincidunt, elit vitae euismod luctus, lorem nulla condimentum lacus, vel
  congue dolor velit at neque. Nullam eu rhoncus turpis. Duis auctor neque eget egestas posuere. In id nulla vitae risus egestas dapibus. Mauris id congue nulla. Suspendisse eros nisl, suscipit nec sem ut, porta sodales sapien. Pellentesque id enim porta,
  suscipit lacus eu, faucibus dui. Curabitur elementum nec nisi vitae sodales. Nulla nec diam nec purus eleifend mattis sit amet ac libero. Pellentesque ut leo ac dui sodales maximus at vel lacus. Aenean at elit massa. Maecenas scelerisque nulla eu mattis
  laoreet. Pellentesque nec velit condimentum, maximus ex in, tincidunt purus. Sed vulputate vel dolor eget pellentesque. Donec et elit sed magna elementum hendrerit eget id orci. Curabitur eget rutrum ligula. Sed tortor dolor, congue at fermentum a,
  imperdiet eget leo. Proin at mi posuere ipsum vehicula cursus vitae eu diam.
</p>

Answer 2

这是答案，运行我的复制片段。你应该把溢出隐藏在HTML的正文中。

jQuery(function($) {
	$(document).on('click', '#insert-template', function(event) {
	event.preventDefault();
	$('#template-container').css('display','block');	
    $('body').addClass('stop-scrolling');
});
});

#wpwrap { /* This DIV is from wordpress */
    height: auto;
    min-height: 100%;
    width: 100%;
    position: relative;
    -webkit-font-smoothing: subpixel-antialiased;
}

#template-container {
	display:none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	opacity: 0.9;
	z-index: 100100;
  overflow:hidden;
}

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#" id="insert-template">Link</a>

<div id="wpwrap">
<div id="template-container"></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id tincidunt metus. Etiam ut elit volutpat, finibus magna non, tempus velit. Duis malesuada convallis lacinia. Pellentesque consectetur sit amet nibh et dictum. Sed sit amet nulla rhoncus, facilisis quam id, scelerisque ex. Sed sed interdum sapien. Mauris justo est, semper sit amet vulputate nec, ornare quis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean ante erat, pulvinar vitae lorem et, tempus feugiat dolor. Aliquam libero risus, iaculis sit amet nunc vitae, pellentesque bibendum nisl. Sed tincidunt vitae velit a ultricies. Nullam condimentum vel orci nec pharetra. Praesent rhoncus condimentum purus vel vehicula. Maecenas vel neque id arcu sollicitudin elementum id vel erat.

Mauris nec malesuada arcu. Cras scelerisque et metus tincidunt semper. Vivamus ornare nec lectus id condimentum. Nam nunc arcu, facilisis eu fringilla eget, feugiat eget elit. Nunc augue dui, placerat id maximus vitae, elementum tincidunt purus. Sed facilisis luctus sollicitudin. Ut aliquam arcu vitae lacus efficitur, ut ornare leo ullamcorper. Aliquam scelerisque porttitor libero quis vestibulum. Quisque a justo tellus. In vel varius enim. Etiam a orci in augue maximus mattis.

Integer commodo, ipsum in feugiat eleifend, purus diam congue dolor, gravida pharetra tortor dolor ut urna. Maecenas sed mattis quam. Duis dignissim, nibh at hendrerit pharetra, massa quam auctor velit, id aliquam orci velit et arcu. Vestibulum rutrum nec purus ac sagittis. Pellentesque ullamcorper suscipit orci, nec blandit felis vulputate et. Sed ac tortor sit amet leo sollicitudin efficitur. In semper purus quis magna molestie, et maximus ex sagittis. Aliquam id tortor cursus, semper elit eu, sodales dui. Pellentesque volutpat justo vitae fermentum cursus. Vestibulum lacus quam, efficitur sed posuere sit amet, mollis non augue. Quisque tincidunt hendrerit lorem ac aliquam. Vivamus quis risus interdum leo ullamcorper tempus non eu felis. In imperdiet in magna at tempor. Suspendisse potenti. Proin volutpat lacus a arcu sollicitudin condimentum.

Praesent tristique laoreet risus, ac viverra turpis ornare sit amet. Praesent ut lectus non elit porttitor molestie sed quis nulla. Aliquam non tellus ultricies, rutrum justo non, aliquam ex. Nam vestibulum non metus ac pulvinar. Mauris in fringilla turpis. Praesent posuere, augue vitae semper tincidunt, odio diam malesuada nunc, ut imperdiet eros leo vitae odio. Nulla interdum, justo a iaculis pulvinar, eros sem fermentum nisl, vel sollicitudin odio est ac justo. Morbi congue sollicitudin ligula, vitae viverra urna fringilla ut. Nulla egestas vitae est quis ultrices. Quisque aliquam libero lacus, a tempus neque hendrerit id. Nullam lacus lacus, rhoncus a enim varius, tempor bibendum justo. Etiam sollicitudin diam vitae libero convallis euismod. Cras commodo ante quis massa porttitor suscipit. Nam tincidunt, elit vitae euismod luctus, lorem nulla condimentum lacus, vel congue dolor velit at neque. Nullam eu rhoncus turpis. Duis auctor neque eget egestas posuere.

In id nulla vitae risus egestas dapibus. Mauris id congue nulla. Suspendisse eros nisl, suscipit nec sem ut, porta sodales sapien. Pellentesque id enim porta, suscipit lacus eu, faucibus dui. Curabitur elementum nec nisi vitae sodales. Nulla nec diam nec purus eleifend mattis sit amet ac libero. Pellentesque ut leo ac dui sodales maximus at vel lacus. Aenean at elit massa. Maecenas scelerisque nulla eu mattis laoreet. Pellentesque nec velit condimentum, maximus ex in, tincidunt purus. Sed vulputate vel dolor eget pellentesque. Donec et elit sed magna elementum hendrerit eget id orci. Curabitur eget rutrum ligula. Sed tortor dolor, congue at fermentum a, imperdiet eget leo. Proin at mi posuere ipsum vehicula cursus vitae eu diam.
</p>

隐藏溢出不能在Wordpress管理员上工作

2 个答案: