Before I write this, I already check this post answer below but still can't fix my problem:
- 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
I've been working this on my wordpress site. It is to make modal dialog appear on top of this overlay below on admin page when template button clicked. The overlay is appeared when I click on button. But the problem is I can't hide the scrollbar and make it unscrollable. Please click on link to view overlay (please refer my snippet). How do I prevent this scrollbar from appear and make this unscrollable?. Thanks.
Note:
- I register/enqueue all styles/scripts on wordpress admin page using admin_enqueue_scripts hook.
- I put div below
<div id="template-container"></div>using admin_footer hook. - Parent of div#template-container is #wpwrap which is come from wordpress itself and positioned relative.
jQuery(function($) {
$(document).on('click', '#insert-template', function(event) {
event.preventDefault();
$('#template-container').css('display','block');
});
});#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;
}<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>
