Question

我在我的网站上为我的联系表单创建了一个弹出式div。

这是当前的HTML：

<div class="contact_form">

    <div class="form_container">
    </div>

</div>

这是我的CSS：

.contact_form{
    display    : none;
    width      : 100%; 
    height     : 100%;
    background : rgba(0, 0, 0, 0.7);;
    position   : absolute;
    top        : 0;
    left       : 0;
}

.contact_form .form_container{
    background-image: url('images/popup-post-it_2.png');
    background-size: 100%;
    background-repeat: no-repeat;
    display: block;
    width: 33.4em;
    z-index: 1001;
    position: fixed;
    top: 22%;
    left: 34%;
    padding-left: 10px;
    margin: auto;
    height: 33em;
}

2个问题：

我可以滚动页面 - 我不应该这样做。
当我滚动时 - “。form_container”随我滚动。

我知道如何使用javascript禁用它，但我发现过去的实验有误，让事情变得混乱。

有没有更优雅的方式来做到这一点，也许使用CSS？

http://jsfiddle.net/246m2u8y/21/

Answer 1

我会建议dropbox did in their website。（点击“登录”后）。

他们保留滚动条但禁用它。这样，在删除滚动条时页面不会“跳转”，看起来会好得多。

删除滚动条时，网站的居中元素必须重新计算其位置并移动，导致网站中的“闪烁”或“跳跃”远非理想，您可以看到in this example与滚动条仍然可见的this other one相比较。

如果你看看他们的方法，你会注意到他们为body元素添加了一个类。你可以这样做：

$('.demo').click(function(){
    $('html').addClass('noscroll');
});

和它的css：

 html.noscroll{
    position: fixed;
    width: 100%;
    top:0;
    left: 0;
    height: 100%;
    overflow-y: scroll !important;
    z-index: 10;
 }

Demo online

Answer 2

当弹出窗口打开时，您只需在主体上设置一个类以将其设置为固定：

body.popup-visible {
    position   : fixed;
    width: 100%;
    height: 100%;
}

请参阅updated fiddle。

在我的页面中心打开div时，无法滚动的正确方法是什么？

2 个答案: