Question

我正在创建一个简单的模态。当显示模态时，我希望模态显示在页面顶部，并且要锁定背景，只有模态滚动。

在模态显示中，我将背景设置为position:fixed，但在修复之前将其滚动到顶部。

此外，如果在点击显示模态之前向下滚动页面的一半，则打开时模式也会向下滚动。

我想要发生的是：用户在页面上的任何位置，点击打开模态并锁定背景。然后只滚动模态。然后关闭模态并返回到原来的位置。

这可能吗？

这是我尝试的CSS：

.modBG { /* background */
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color: rgba(0,0,0,0.4);
z-index:15;
display:none;
height:100%;
width:100%;
}

#wishData { /* modal window */
width:100px;
z-index:20;
position:absolute;
display:none;
margin:0 auto;
min-height:60px;
overflow-y:auto;
overflow-x:hidden;
padding:10px;
background:#fff;
top:20px;
-webkit-box-shadow: 0px 0px 14px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 14px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 14px 0px rgba(50, 50, 50, 0.75);
margin-left:100px;
}

和jquery：

$(document).on('click', '.wishView', function() {
    $('#sb-site').css('position','fixed');
    $('.modBG').show();
    $('#wishData').show();
    return false;
});

// click background to close modal
$(document).on('click', '.modBG', function() {
        $('.modBG').hide();
        $('#wishData').hide();
        $('#sb-site').css('position','relative');
    });

Answer 1

您可以执行以下操作：

将模态设置为最大高度为90％

并设置overflow-y：scroll;在模态容器上也是

当模态加载然后设置

body{overflow:hidden;}

小提琴：http://jsfiddle.net/dBXyL/12/

编辑：添加了新的小提琴，其位置固定在模态容器上。

Answer 2

想出来。感谢您的回答/评论。

Here's how I did it

将模态包装在另一个元素中，然后将overflow:hidden应用于body＆amp; HTML

$(document).on('click', '.wishView', function() {
    var winheight = $(window).height();
    $('.modHolder').css('min-height',winheight);
    $('body').addClass('noScroll');
    $('.modBG, .modHolder, #wishData').show();
    return false;
});

在模态后锁定背景

2 个答案: