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

问题描述 投票：18回答：8

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

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

我的问题：

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

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>
javascript jquery html css
8个回答
14
投票

一个简单的答案，你可以使用，不需要你停止滚动事件将设置你的#ac-wrapper固定的位置。

EG

#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;
}

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

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

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 */
}
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');
    });
}

希望这可以帮助。

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();
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
}
0
投票

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

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

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

Popup

弹出打开滚动停止现在...当我点击关闭自动滚动运行。

close 
**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>
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.