Question

即使我向上/向下滚动或更改浏览器窗口的大小，如何让jQuery弹出窗口保持在屏幕中央？

这个div应该保存对话框：

<div id="dialog">
  <h3 id="deleteMessage"></h3>
</div>

并且有对话框jQuery代码：

$("#dialog").dialog({
        title: "Confirm Delete",
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        closeOnEscape: false,
        minWidth: 440,
        minHeight: 220,
        open: function(event, ui) {
            $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();

还有这段代码会显示弹出消息，具体取决于我选择的数据表元素的id

$("#deleteMessage").html('Are you sure you want to delete "' +"<b>"+ selectedItemName +"</b>"+ '" report?');

Answer 1

试试这个css

devtools::build()

Answer 2

尝试将此添加到您的jQuery

职位：[＆＃39;中心＆＃39;，＆＃39;中心＆＃39;]

所以你的jQuery代码看起来像：

$("#dialog").dialog({
        title: "Confirm Delete",
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'center'],
        closeOnEscape: false,
        minWidth: 440,
        minHeight: 220,
        open: function(event, ui) {
            $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();

Answer 3

当涉及到像这样的简单事情时，我更赞成简单的vanilla JS代码，但你可以尝试使用CSS，我猜：

#dialog{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: (your width * 1/2);
    margin-top: (your height * 1/2)
}

这就像translate(50%, 50%)，但有更好的支持。我想唯一的缺点是你需要知道宽度和高度。

Answer 4

如果您不想编写任何CSS并想使用下面的jquery使用代码。只需使用您的ID而不是modal1

setTimeout(function () {
          $("#modal1").css({
                "top": ($(window).scrollTop()) + ($(window).height() - $("#modal1").height() - 200) / 2,
                "left":($(window).width() - $("#modal1").width())/2
          });
    }, 250);

您只需将此代码放在代码的open函数中，如下所示

dialogDiv.dialog({
title: "Confirm Delete",
autoOpen: false,
width: 470,
height: 200,
modal: true,
draggable: false,
resizable: false,
closeOnEscape: false,
create: function (event) { $(event.target).parent().css({ 'position': 'fixed', 'top': '50%', 'margin-top': '-100px', 'left': '50%;', 'margin-left': '-235px' }); },
open: function(event, ui) {
    $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
    setTimeout(function () {
          $("#modal1").css({
                "top": ($(window).scrollTop()) + ($(window).height() - $("#modal1").height() - 200) / 2,
                "left":($(window).width() - $("#modal1").width())/2
          });
    }, 250);
    },
 buttons: {
        "Delete": function () {                    
            $("#repFilterId").val(selectedItemId);
            $("#deleteForm").submit();

            clearLastValues();
        },
        "Cancel": function () {
            clearLastValues();
            dialogDiv.dialog("close");
        }
    }
});

Answer 5

.ui-dialog { 位置：固定！重要;

}

如何使jQuery对话框弹出保持在浏览器的中心

5 个答案: