如何使jQuery对话框始终处于浏览器的中心位置(具体情况)

How to make jQuery popup stay in the center of the screen even while I'm scrolling up/down or change the size of the browser window? The scenario is like this: to delete a record of the database that are shown in a datatable. So in a Asp.Net MVC project, each datatable element has its own detail, edit and delete actions.

当我向上/向下滚动或改变浏览器窗口的大小时，如何使jQuery弹出窗口保持在屏幕的中心?场景是这样的:删除数据表中显示的数据库记录。所以在一个Asp。Net MVC项目中，每个datatable元素都有自己的细节、编辑和删除操作。

This div is supposed to hold the dialog:

这个div应该保存对话框:

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

and there is the dialog jQuery code:

对话框jQuery代码:

var dialogDiv = $("#dialog");
var selectedItemId = null;
var selectedItemName = null;

  dialogDiv.dialog({
    title: "Confirm Delete",
    autoOpen: false,
    modal: true,
    draggable: false,
    resizable: false,
    closeOnEscape: false,
    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");
            }
        }
    });

function btnDeleteClick(itemID, itemName) {
        selectedItemId = itemID;
        selectedItemName = itemName;

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

        dialogDiv.dialog("open");

When I add some css like (from an answer that I got):

当我添加一些css(从我得到的答案):

#dialog{
   position: fixed;
   top:50%;
   left:50%;
   transform: translate(-50%, -50%);
   }

I get this problem:

我得到了这个问题:

the text "are you sure you want to delete..." stays in the center of the screen while the popoup dialog stays where it appears in the beginning and goes up/down with the page content (those 2 are separated from each-other!)

文本“您确定要删除……”保持在屏幕的中心，而popoup对话框保持在它在开头出现的位置，并随着页面内容上下移动(这两个内容彼此分开!)

1 个解决方案

#1

If you give your dialog a height and width you can use the create initiator to pass it some css like this:

如果你给你的对话框一个高度和宽度，你可以使用create发起人来传递一些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");
        }
    }
});

See this JSfiddle example: https://jsfiddle.net/fictus/mjt25cap/

请参见这个JSfiddle示例:https://jsfiddle.net/fictus/mjt25cap/

#1