Question

我正在显示一个div作为弹出窗口。现在问题是弹出中心，但如果我向下滚动，我可以点击我的应用程序的内容，当弹出窗口出现时，它不会发生。

代码：

jQuery(document).ready(function () {
    setTimeout(showPopup(), 5000);
});
function showPopup() {
    $('#userId').show(0, function () {
         $('#userid').css('z-index','5');
        $('body').css('overflow', 'auto');
        $('.popUp').center();
    });
}

所以我希望它能让用户在向上和向下滚动时上下移动div弹出位置。请帮忙。在此先感谢。

Answer 1

这在黑暗中有点刺，因为我不知道标记。但是看看你的代码，你可能需要这样的东西：

function showPopup() {
  $('#userId').show(0, function () {
    $('#userid').css('z-index','5')
    $('body').css('overflow', 'auto')
    $('.popUp').center().css('position', 'fixed') /* line changed */
  });
}

它会将弹出窗口中的css位置属性设置为“固定”，即使在滚动时也应该将其暂停到位。

Answer 2

为了避免单击后台内容，您可以使用内部jquery动态在运行时创建叠加层，如下所示：

function showPopup() {
   $('body').prepend('<div class="overlay"></div>');
    $('#userId').show(0, function () {
         $('#userid').css('z-index','5');
        $('body').css('overflow', 'auto');
        $('.popUp').center();
    });
}

覆盖

的{p> CSS属性

.overlay{position:fixed; width:100%; height:100%; background:transparent; z-index:2;}

确保在关闭弹出窗口时使用$('.overlay').remove()删除此叠加层

Answer 3

您只需将弹出窗口放入包装容器中，该容器具有function edit(){ $("#item").setAttribute("contenteditable", "true") }位置并且拉伸全宽度＆amp;视口的高度。

fixed

p {
    font-size: 3em;
}

.container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .75);
}

.popup {
    position: absolute;
    /* top: 25%; */
    /* left: 50%; */
    /* width: 300px; */
    /* margin-left: -150px; */
    top: 50%; /* added */
    left: 50%; /* added */
    margin-right: -50%; /* added */
    transform: translate(-50%, -50%); /* added */
    padding: 25px;
    background: #fff;
    border: 1px solid #333;
}

能够在向下滚动PopUp时访问内容

3 个答案: