26

我按照在线教程 ( 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>
4

9 回答 9

18

要禁用滚动条：

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

这将隐藏滚动条

背景淡化的东西：

我创建了自己的弹出对话框小部件，它也有背景。我使用了以下 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 */
}
于 2013-10-31T08:23:29.783 回答
18

一个简单的答案，您可以使用并且不需要您停止滚动事件，那就是设置您的#ac-wrapper固定位置。

例如

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

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

但是在打开弹出窗口的情况下滚动页面是不好的！！！（几乎总是）

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

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

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

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

如果用户在弹出窗口打开时滚动，文档将不会滚动。当用户关闭弹出窗口时，滚动将再次可用，用户可以从他们离开的地方继续:)

于 2013-10-31T08:25:35.383 回答
6

我有类似的问题；想要在显示“弹出”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;
}

查询：

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

希望这可以帮助。

于 2014-02-21T20:10:19.337 回答
3

使用下面的代码来禁用和启用滚动条。

 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();
于 2016-09-20T15:36:29.470 回答
3

如果 body 的 'overflow-y' 的简单切换破坏了页面的滚动位置，请尝试使用这 2 个函数（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
}
于 2018-12-05T19:04:52.330 回答
1

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>
于 2018-11-25T08:34:05.957 回答
0

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

$(document).on("touchmove","#menu-left-toggle",function(e){
    e.stopPropagation();
});
于 2015-03-26T20:28:39.930 回答
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>
于 2019-04-26T12:57:01.517 回答
0



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

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

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

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

// 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被固定时，它都会滚动回到顶部，这是我不希望看到的行为。（想象一下用户正在浏览一个很长的内容，几乎要滚动到页面底部，突然弹出一个弹窗，使页面向右滚动到顶部，这是一种糟糕的用户体验）

文章中的解决方案

基于“固定主体”的方法，另外，该解决方案将主体的 CSS 顶部设置为“-window.scrollY px”的值，以使主体看起来在固定时停留在当前滚动位置。此外，该方案使用了body的CSS顶部作为临时参考，这样当我们想让body再次可滚动时，可以通过属性检索滚动位置。（请注意，您必须将获得的位置乘以 -1 才能使其为正）

于 2021-07-21T07:52:53.637 回答