Question

我看到这是大多数jquery模式弹出框的问题。所以我想知道，是否有任何jquery代码将保持jquery模式总是在页面中居？我知道这可以通过纯javascript代码实现，但jquery呢？

Answer 1

如果您使用的是自定义模式，可以帮助您的一些样式是：

<div id="modal"></div>

#modal {
    position: fixed;
    height: 80px;
    width: 200px;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-right: -100px;
}

“position：fixed”将模态基于窗口保持在某个位置。高度和宽度显然提供尺寸，而左/边缘左边和顶部/边缘顶部实际上居中。边距左边和边距顶部必须分别是宽度/高度的负半边。

Answer 2

如果你想用jQuery集中一个元素，试试这个;

var browserW = $(window).width();
var centerEle = (browserW - 960) / 2; //if ur website design's width 960

$('.centeredEle').css({'left':centerEle + 'px'});//or margin-left, ur choise

Answer 3

如果您对jquery感到满意......您可以使用以下jquery函数

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

如何使jquery模式始终以页面为中心？

3 个答案: