锁定背景模式后的位置

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

在模态显示中，我将背景设置为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'); 
    });

来源

2014-03-07 Darren Sweeney

你为什么不尝试与溢出滚动弹出一个固定的高度？没有固定在背景上的位置，那会好吗？ – Bobby5193

想通了。感谢您的回答/评论。

Here's how I did it

包裹在另一个元素的模式，然后应用于overflow:hidden身体& HTML

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

来源

2014-03-07 13:39:06

你可以做到以下几点：

将模态转为最大高度为90％左右

并设置overflow-y：scroll;模态容器以及

当模式加载然后设置

body{overflow:hidden;}

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

编辑：添加了固定的模式容纳位置上的新小提琴。

来源

2014-03-07 11:46:01

不，不幸的是，这不是一个很好的解决方案，同时，向下滚动链接到它的大部分隐藏点击 –

然后设置最大高度为70％，然后它会改变 –

锁定背景模式后的位置

回答

相关问题