如何使jQuery对话框弹出窗口停留在浏览器的中心（具体情况） [英] How to make jQuery dialog popup stay in the center of browser (specific situation)

问题描述

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

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.

这个div应该保存对话框：

This div is supposed to hold the dialog:

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

并且有对话框jQuery代码：

and there is the dialog jQuery code:

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喜欢（从我得到的答案）：

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

#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!)

推荐答案

如果你给出了您的对话框 height 和 width 可以使用 create 发起者传递它一些css像这样：

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

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/

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

这篇关于如何使jQuery对话框弹出窗口停留在浏览器的中心（具体情况）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！