如何使jQuery对话框弹出窗口停留在浏览器的中心（具体情况）

如何使jQuery弹出窗口即使在我上下滚动或更改浏览器窗口大小时仍保持在屏幕中央？场景如下：删除datatable中显示的数据库记录。因此，在Asp.NETMVC项目中，每个datatable元素都有自己的详细信息、编辑和删除操作

这个div应该保存对话框：

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

我遇到了这个问题：

---

文本“是否确实要删除…”停留在屏幕中央，而popoup对话框停留在其开始出现的位置，并随着页面内容向上/向下移动（这两个对话框彼此分开！）

如果您为对话框指定了

高度

和

宽度

，则可以使用

创建

启动器向其传递一些css，如下所示：

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();
    },
 buttons: {
        "Delete": function () {                    
            $("#repFilterId").val(selectedItemId);
            $("#deleteForm").submit();

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

---

请参阅此JSFIDLE示例：

如果可能，提供JSFILDLE或其他代码演示。我认为缺少外部资源链接，请包括相关文件。一切就绪，jquery-ui.js和.css我应该复制粘贴您在这里或jsfiddler中编写的代码吗？复制

宽度和
高度以及
create:function（event）{$（event.target）.parent（）.css（{'position'：'fixed'，'top'：'50%，'margin top'：'-100px'，'left'：'50%；'，'margin left'：'-235px'）；}，
将这些代码添加到您的代码中，它应该可以正常工作，您在这里作为答案编写的代码可以正常工作。但是当我改变浏览器大小时，弹出对话框会出现在其他地方，当我把它缩小时，我找不到它（它出现在内容之外，我只是看不到它的边框），当我把它变大（从小）时，弹出对话框会出现在其他地方（浏览器的左侧站点）。。。当我改变浏览器大小时，有没有办法让它在中心固定？我应该把负责弹出窗口的div放在content div中，或者给它一些css样式？再看看我的jsfiddle。我已将其更改为适应窗口大小调整事件。因此，复制（…
部分上的
$（窗口），并替换
创建：函数（事件）{$（event.target）.parent（）.css（{'position'：'fixed'，'top'：'50%'，'margin top'：'-100px'，'left'：'50%'，'margin left'：'-235px'}）。将class（'dialogOnResize；}，
添加到代码中。。。
#dialog{
   position: fixed;
   top:50%;
   left:50%;
   transform: translate(-50%, -50%);
   }

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();
    },
 buttons: {
        "Delete": function () {                    
            $("#repFilterId").val(selectedItemId);
            $("#deleteForm").submit();

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