Question

我认为我的问题措辞不多，但我会试着解释一下。正如您在此网站 wookmark.com 所看到的，当您点击图片时，弹出模式将被激活，主页滚动条将被禁用。但是，当模态被激活时，滚动条仅适用于该模态，正如我之前所说 - 主模式滚动条在激活模态时被禁用。

问：如何制作？我需要srollbar在点击后使用模态，主页面将冻结。

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类。

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

1 个答案: