弹出窗口处于活动状态时禁用滚动

时间：2013-10-31 08:13:55

标签： javascript jquery html css

我通过在线教程（http://uposonghar.com/popup.html）创建了一个jQuery弹出窗口。

由于我对jQuery的了解不足，我无法按照我的要求使其工作。

我的问题：

  1. 我想在弹出窗口处于活动状态时禁用网页滚动。
  2. 活动时弹出窗口的背景淡化颜色不适用于完整网页。

    3. CSS：

    body {
    background: #999;
}
#ac-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
}
#popup{
    width: 555px;
    height: 375px;
    background: #FFFFFF;
    border: 5px solid #000;
    border-radius: 25px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    box-shadow: #64686e 0px 0px 3px 3px;
    -moz-box-shadow: #64686e 0px 0px 3px 3px;
    -webkit-box-shadow: #64686e 0px 0px 3px 3px;
    position: relative;
    top: 150px; left: 375px;
}

    JavaScript的：

    <script type="text/javascript">
function PopUp(){
    document.getElementById('ac-wrapper').style.display="none";
}
</script>

    HTML：

    <div id="ac-wrapper">
  <div id="popup">
  <center>
    <p>Popup Content Here</p>
    <input type="submit" name="submit" value="Submit" onClick="PopUp()" />
  </center>
  </div>
</div>

<p>Page Content Here</p>

9 个答案:

答案 0 :(得分：15)

要禁用滚动条：

$('body').css('overflow', 'hidden');

这将隐藏滚动条

背景-淡入件事：

我创建了自己的popup-dialog-widget，它也有背景。我使用了以下CSS：

div.modal{
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background-color: #000;
    display: none;
    filter: alpha(opacity=25); /* internet explorer */
    -khtml-opacity: 0.25; /* khtml, old safari */
    -moz-opacity: 0.25; /* mozilla, netscape */
    opacity: 0.25; /* fx, safari, opera */
}

答案 1 :(得分：14)

您可以使用并且不要求您停止滚动事件的简单答案是设置#ac-wrapper已固定的位置。

e.g。

#ac-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.6);
    z-index: 1001;
}

这将使弹出窗口的容器始终可见（左上角对齐），但仍然允许滚动。

但是打开弹出窗口滚动页面很糟糕！ （几乎总是无论如何）

您不希望允许滚动的原因是因为如果您的弹出窗口不是全屏或半透明，用户将看到弹出窗口后面的内容滚动。除此之外，当他们关闭弹出窗口时，他们现在将在页面上的不同位置。

一个解决方案是，当您在javascript中绑定click事件以显示此弹出窗口时，还要使用基本上这些规则向主体添加类：

.my-body-noscroll-class {
    overflow: hidden;
}

然后，当通过触发某个动作或通过单击解除它来关闭弹出窗口时，您只需再次删除该类，在弹出窗口关闭后允许滚动。

如果用户在弹出窗口打开时滚动，则文档不会滚动。当用户关闭弹出窗口时，滚动将再次可用，用户可以继续停止的位置：）

答案 2 :(得分：4)

我有类似的问题;想要在显示“弹出”div时禁用垂直滚动。

更改body的溢出属性确实有效，但也会弄乱文档的宽度。

我选择了jquery来解决这个问题，并使用占位符表示滚动条。 这是在没有绑定到scroll事件的情况下完成的，这不会改变您的滚动条位置或导致闪烁：）

HTML：

<div id="scrollPlaceHolder"></div>

CSS：

body,html
{
    height:100%; /*otherwise won't work*/
}
#scrollPlaceHolder
{
    height:100%;
    width:0px;
    float:right;
    display: inline;
    top:0;
    right: 0;
    position: fixed;
    background-color: #eee;
    z-index: 100;
}

Jquery的：

function DisableScrollbar()
{
    // exit if page can't scroll
    if($(document).height() ==  $('body').height()) return;

    var old_width = $(document).width();
    var new_width = old_width;

    // ID's \ class to change
    var items_to_change = "#Banner, #Footer, #Content";

    $('body').css('overflow-y','hidden');

    // get new width
    new_width = $(document).width()

    // update width of items to their old one(one with the scrollbar visible)
    $(items_to_change).width(old_width);

    // make the placeholder the same width the scrollbar was
    $("#ScrollbarPlaceholder").show().width(new_width-old_width);

    // and float the items to the other side.
    $(items_to_change).css("float", "left");

}

function EnableScrollbar()
{
    // exit if page can't scroll
    if ($(document).height() ==  $('body').height()) return;   

    // remove the placeholder, then bring back the scrollbar
    $("#ScrollbarPlaceholder").fadeOut(function(){          
        $('body').css('overflow-y','auto');
    });
}

希望这有帮助。

答案 3 :(得分：2)

使用以下代码禁用和启用滚动条。

 Scroll = (
    function(){
          var x,y;
         function hndlr(){
            window.scrollTo(x,y);
            //return;
          }  
          return {

               disable : function(x1,y1){
                    x = x1;
                    y = y1;
                   if(window.addEventListener){
                       window.addEventListener("scroll",hndlr);
                   } 
                   else{
                        window.attachEvent("onscroll", hndlr);
                   }     

               },
               enable: function(){
                      if(window.removeEventListener){
                         window.removeEventListener("scroll",hndlr);
                      }
                      else{
                        window.detachEvent("onscroll", hndlr);
                      }
               } 

          }
    })();
 //for disabled scroll bar.
Scroll.disable(0,document.body.scrollTop);
//for enabled scroll bar.
Scroll.enable();

答案 4 :(得分：1)

如果正文的“ overflow-y”的简单切换破坏了页面的滚动位置，请尝试使用以下两个函数（jQuery）：

// Run this function when you open your popup:
var disableBodyScroll = function(){
    window.body_scroll_pos = $(window).scrollTop(); // write page scroll position in a global variable
    $('body').css('overflow-y','hidden');
}

// Run this function when you close your popup:
var enableBodyScroll = function(){
    $('body').css('overflow-y','scroll');
    $(window).scrollTop(window.body_scroll_pos); // restore page scroll position from the global variable
}

答案 5 :(得分：0)

我遇到了同样的问题并找到了摆脱它的方法，你只需要停止在弹出的元素上的touchmove传播。对我来说，这是屏幕上出现的全屏菜单，你无法滚动，现在你可以。

$(document).on("touchmove","#menu-left-toggle",function(e){
    e.stopPropagation();
});

答案 6 :(得分：0)

https://jsfiddle.net/satishdodia/L9vfhdwq/1/
     html：-         打开弹出窗口                 

弹出

        

弹出打开滚动立即停止...当我单击关闭时，自动滚动运行。

        关     

**css:-**    
        #popup{
        position: fixed;
        background: rgba(0,0,0,.8);
        display: none;
        top: 20px;
        left: 50px;
        width: 300px;
        height: 200px;
        border: 1px solid #000;
        border-radius: 5px;
        padding: 5px;
        color: #fff;
    } 
**jquery**:-
       <script type="text/javascript">
        $("#open_popup").click(function(){
        $("#popup").css("display", "block");
        $('body').css('overflow', 'hidden');
      });

      $("#close_popup").click(function(){
        $("#popup").css("display", "none");
        $('body').css('overflow', 'scroll');
      }); 
      </script>

答案 7 :(得分：0)

此解决方案对我有用。

HTML： 

<div id="payu-modal" class="modal-payu">

      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <p>Some text in the Modal..</p>
      </div>

    </div>

CSS： 

.modal-payu {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  bottom: 0;


  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

JS： 

<script>
      var btn = document.getElementById("button_1");
      btn.onclick = function() {
        modal.style.display = "block";
        $('html').css('overflow', 'hidden');
      }

    var span = document.getElementsByClassName("close")[0];
    var modal = document.getElementById('payu-modal');

    window.onclick = function(event) {
      if (event.target != modal) {
      }else{
        modal.style.display = "none";
        $('html').css('overflow', 'scroll');
      }
    }

    span.onclick = function() {
      modal.style.display = "none";
      $('html').css('overflow', 'scroll');
    }

    </script>

答案 8 :(得分：0)



我遇到了这个问题并尝试了几种解决方案， 这是解决我的问题的文章 (https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/)，而且非常简单！

它使用“固定体”解决方案，这在很多帖子中都很常见。 这个解决方案的问题是，当弹出窗口关闭时，主体会滚动回顶部。 但文章指出：在使用方案的同时，通过操作CSS top和position属性，可以恢复滚动位置。

解决方案的另一个问题是，您无法将解决方案应用于多个弹出场景。 所以我添加了一个变量来存储popup的计数，只是为了确保程序不会在错误的时间触发启动过程或重置过程。

这是我得到的最终解决方案：

// freeze or free the scrolling of the body:

const objectCountRef = { current: 0 }

function freezeBodyScroll () {
  if (objectCountRef.current === 0) {  // trigger the init process when there is no other popup exist
    document.body.style.top = `-${window.scrollY}px`
    document.body.style.position = 'fixed'
  }
  objectCountRef.current += 1
}
function freeBodyScroll () {
  objectCountRef.current -= 1
  if (objectCountRef.current === 0) {  // trigger the reset process when all the popup are closed
    const scrollY = document.body.style.top
    document.body.style.position = ''
    document.body.style.top = ''
    window.scrollTo(0, parseInt(scrollY || '0') * -1)
  }
}

您也可以在我的 Codepen 上查看演示：https://codepen.io/tabsteveyang/pen/WNpbvyb

编辑


更多关于“固定体”解决方案

该方法主要是将body元素的CSS位置属性设置为'fixed'，使其不可滚动。 不管已经滚动了多远，当body固定后，它会滚动回到顶部，这是我不希望看到的行为。 （想象一下，用户正在浏览很长的内容，几乎滚动到页面底部，突然出现一个弹出窗口，使页面直接滚动回到顶部，这是一种糟糕的用户体验）

文章中的解决方案

基于'fixed body'方法，此外，该解决方案将body的CSS顶部设置为'-window.scrollY px'的值，使body看起来像在滚动时停留在当前滚动位置固定的。 此外，该解决方案使用了 body 的 CSS 顶部作为临时引用，以便我们在希望再次使 body 可滚动时通过属性检索滚动位置。 （请注意，您必须将获得的位置乘以 -1 才能使其成为正数）

相关问题
最新问题