Question

jQuery代码：

function thumb(id,ths) {
    if (<?=$loggedin?>) {
        $.post(base_url+"index.php/myad/addthumbs", {uniqueid:id});
        $(ths).addClass("red");
    } else {
        _ths=$(ths);
        var number = Math.floor(Math.random()*90000) + 10000;
        $("#captcha").attr("data-id",id);
        $("#captcha").text(number);
        $("#pop").modal("show");
    }
}

我如何以模态为中心？请帮助我，并提前感谢。

我在google和stackoverflow上找到解决方案，但是当它由纯jquery构建时，会询问基于bootstrap的模态的问题。

Answer 1

一种方法是你可以调整margin-top风格的百分比

.modal-dialog {
    margin-top:10%;  /* Based on your modal height adjust the percentage */
}

OR

.modal-dialog {
    padding-top:10%; /* Based on your modal height adjust the percentage */
}

Answer 2

为弹出窗口提供一个固定的css：

#pop {
  position:fixed;
  top:50%;
  left:50%;
}

然后在JS中将它与宽度和高度对齐：

$("#pop").css({
  "margin-top":-($(this).height()/2),
  "margin-left":-($(this).width()/2)
});

Answer 3

不使用jQuery，您只需将display: table与margin: auto一起用于主要内容容器。

此centered modal is here的一个工作示例。

基本上，这些是重要的规则：

.modal-content {
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 60%; /* here you can also use a fixed width */
    overflow: auto;
    z-index: 50;
}

使用JavaScript或jQuery触发模态的打开和关闭。

如何垂直居中jQuery Modal？

3 个答案: