jquery - 如何在激活弹出模式时停止主滚动条工作，这也需要一个滚动条

Question

我认为我的问题措辞不当，但我会尽力解释。正如你在这个网站上看到的 wookmark.com ，当您点击图片时，将激活弹出模式并禁用主页滚动条。然而，当模态被激活时，滚动条只与那个模态一起工作，正如我之前所说的——当模态被激活时，主页滚动条被禁用。

问:这个怎么做？我需要滚动条在点击后与模态一起工作，并且主页会卡住。

HTML:

<div id="modal"></div>

<div id="maincontent">
  <div class="test"></div>
  <div class="test"></div>
  <!-- etc -->
</div>

CSS:

* { margin:0; padding:0; }

#modal {
  position:absolute;
  margin:auto;
  width:400px;
  height:1800px;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:black;
  border:5px solid blue;
  display:none;
}

#maincontent { margin:50px auto; width:100%; }

.test { float:left; margin:0 5px 5px 0; width:24%; height:100px; background:red; }

jQuery:

$(document).ready(function() {
  $('.test').click(function() {
  $('#modal').show();
  });
});

Jsfiddle 演示:

http://jsfiddle.net/1ao9gt9L/1/

抱歉英语不好

Answer 1

Codepen example

  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      close: function( event, ui ) {
        $('.rofl').removeClass('fixed');
      }
    });

    $( ".opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
      $('.rofl').addClass('fixed')
    });
  });

这个想法很简单。我们采用 jQuery UI 的对话框，并在打开的对话框中将 fixed 类添加到 .wrapper 元素。在对话框关闭时，我们删除那个 fixed 类。