2017-09-21 84 views
0

我寫這篇文章之前,我已經檢查這個職位回答以下,但仍無法解決我的問題:溢出隱藏不工作WordPress管理

  1. overflow: hidden not working
  2. Overflow hidden not working in FF & IE
  3. Overflow hidden not working on container div
  4. overflow hidden not working, position of parent relative

我一直在我的wordpress網站上工作。當模板按鈕被點擊時,它會使模式對話框出現在以下覆蓋層上方管理頁面上。當我點擊按鈕時會出現覆蓋圖。但問題是我無法隱藏滾動條並使其無法滾動。請點擊鏈接查看覆蓋圖(請參閱我的代碼段)。我如何防止出現這個滾動條並使其不可滾動?謝謝。

注:

  1. 我註冊/入隊的所有樣式/使用 admin_enqueue_scripts鉤WordPress的管理頁面上的腳本。
  2. 我使用admin_footer鉤子將div放在<div id="template-container"></div>以下。
  3. div#template-container的父級是#wpwrap,它來自wordpress本身,並且相對於定位於

enter image description here

jQuery(function($) { 
 
\t $(document).on('click', '#insert-template', function(event) { 
 
\t event.preventDefault(); 
 
\t $('#template-container').css('display','block'); \t 
 
}); 
 
});
#wpwrap { /* This DIV is from wordpress */ 
 
    height: auto; 
 
    min-height: 100%; 
 
    width: 100%; 
 
    position: relative; 
 
    -webkit-font-smoothing: subpixel-antialiased; 
 
} 
 

 
#template-container { 
 
\t display:none; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t background: #000; 
 
\t opacity: 0.9; 
 
\t 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>

回答

1

您可以在body設置oveflow財產,而不是容器。例如:

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>

1

這裏的答案,運行我的副本片段。你應該把溢出隱藏在HTML的正文中。

jQuery(function($) { 
 
\t $(document).on('click', '#insert-template', function(event) { 
 
\t event.preventDefault(); 
 
\t $('#template-container').css('display','block'); \t 
 
    $('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 { 
 
\t display:none; 
 
\t position: fixed; 
 
\t top: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t bottom: 0; 
 
\t background: #000; 
 
\t opacity: 0.9; 
 
\t 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>