设置弹出窗口居中jquery

发布于 2025-01-08 20:23:51 字数 287 浏览 0 评论 0原文

现在我正在以这种方式设置模态 jQuery 窗口的位置：

   var winH = $(window).height();
   var winW = $(window).width();
    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

当我向下滚动时，如何使弹出窗口居中？

原文

Right now I'm setting the position of the modal jQuery window in this way:

   var winH = $(window).height();
   var winW = $(window).width();
    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

How do I center the popUp when I scroll down?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遗失的美好 2025-01-15 20:23:51

您可以使用其他CSS样式，尝试position:fixed

回复收藏 0 原文

何其悲哀 2025-01-15 20:23:51

您可以这样使用它

// 将模态框放置在页面的中心

    jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( jQuery(window).height() - this.height() ) / 2+jQuery(window).scrollTop() + "px");
    this.css("left", ( jQuery(window).width() - this.width() ) / 2+jQuery(window).scrollLeft() + "px");
    return this;
  }

// 然后调用该函数

 jQuery(".modal-profile").center();

，这将使您的代码井井有条，并且易于在任何项目中使用以将模态框居中。您可以在另一个问题中查看此类工作

模态出现在页面加载

you can use this in this way

// Position modal box in the center of the page

    jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( jQuery(window).height() - this.height() ) / 2+jQuery(window).scrollTop() + "px");
    this.css("left", ( jQuery(window).width() - this.width() ) / 2+jQuery(window).scrollLeft() + "px");
    return this;
  }

//then call the function

 jQuery(".modal-profile").center();

and this will make your code organized and easy to use in any project for center the modal. you can view this kind of work in another question

modal appears on page load

回复收藏 0 原文

千紇 2025-01-15 20:23:51

这个对我有帮助！

$.fn.center = function() {
    this.css("position", "fixed");
    this.css("top", ($(window).height()/2 - this.height()/2) + "px");
    this.css("left", ($(window).width()/2 - this.width()/2) + "px");
    return this;
}

并按照说明使用。

$(".modal-window").center();

This one is helped me!

$.fn.center = function() {
    this.css("position", "fixed");
    this.css("top", ($(window).height()/2 - this.height()/2) + "px");
    this.css("left", ($(window).width()/2 - this.width()/2) + "px");
    return this;
}

And use as described.

$(".modal-window").center();

回复收藏 0 原文

多像笑话 2025-01-15 20:23:51

假设您使用的是 jQuery UI 对话框，默认位置是“center”默认情况下它在视口中居中。如果您使用不同的 jQuery 模式窗口，那么：

$(id).css({
    'position': 'fixed',
    'top': parseInt((winH / 2) - ($(id).height() / 2), 10)
    'left': parseInt((winW / 2) - ($(id).width() / 2), 10)
});

可能可以解决问题。我不确定“向下滚动”是什么意思，因为模式对话框和滚动（对话框外）是互斥的。

Assuming you're using the jQuery UI Dialog, the default position is 'center' which centers it in the viewport by default. If you're using a different jQuery modal window, then:

$(id).css({
    'position': 'fixed',
    'top': parseInt((winH / 2) - ($(id).height() / 2), 10)
    'left': parseInt((winW / 2) - ($(id).width() / 2), 10)
});

might do the trick. I'm not sure what you mean by "scroll down" as a modal dialog and scrolling (outside the dialog) are mutually exclusive.

回复收藏 0 原文

~没有更多了~