Question

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

这个div应该保存对话框：

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

并且有对话框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");

当我添加一些css（从我得到的答案）：

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

我遇到了这个问题：

文字＆＃34;你确定要删除...＆＃34;当popoup对话框保持在开头出现的位置时，它会停留在屏幕的中央，并随着页面内容上下移动（这两个对象彼此分开！）

Answer 1

如果你给对话框height和width，你可以使用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");
        }
    }
});

请参阅此JSfiddle示例：https://jsfiddle.net/fictus/mjt25cap/

如何使jQuery对话框弹出保持在浏览器的中心（具体情况）

1 个答案: