Question

我使用以下jquery代码在单击MVC 3中的Action时打开模式弹出窗口。

动作

@Html.ActionLink("Change", "Settings", "Account", null, new { @class = "openDialog", data_dialog_id = "newPostDialog", data_dialog_title = "Change" })

Jquery的

     $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();

            $("<div></div>")
                .addClass("dialog")
                .attr("id", $(this)
                .attr("data-dialog-id"))
                .appendTo("body")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
                    close: function () { $(this).remove() },
                    modal: true,
                    width:1020

                })
                .load(this.href);
        });

        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
    });

问题

我无法将模态弹出窗口放在屏幕中央或将其与屏幕顶部对齐。

我试过这个，但不起作用。

dialog({
            title: $(this).attr("data-dialog-title"),
            close: function () { $(this).remove() },
            modal: true,
            width:1020,
            top:0,
            left:10


        })

在jquery中天真，我无法找到解决方案。任何人都可以指导我做这个。

自动添加默认样式style=display: block; z-index: 1002; outline: 0px none; position: absolute; height: auto; width: 1020px; top: 394px; left: 439px;，我只想更改top

Answer 1

奇怪地添加height值就行了，这就是我使用过的

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("<div></div>")
            .addClass("dialog")
            .attr("id", $(this)
            .attr("data-dialog-id"))
            .appendTo("body")
            .dialog({
                title: $(this).attr("data-dialog-title"),
                close: function () { $(this).remove() },
                modal: true,
                height:860,
                width:900,
                left:0

            })
            .load(this.href);
    });

Answer 2

我有一个类似的问题，为什么定心不适合我的两个原因......

第一次我没有包含位置javascript库/类，所以尽管所有代码都是正确的，我必须手动设置高度，直到我意识到jquery.ui.position缺失

在我完成整理后，它正确地居中，但页面正在表现出来，我看不到模态，发生了什么是我的链接将页面重定向到自身并向上滚动，添加{{1}在return false;函数的末尾解决了它。

Answer 3

尝试在打开后定位它。

dialog({
            title: $(this).attr("data-dialog-title"),
            close: function () { $(this).remove() },
            open: function () {$( ".selector" ).dialog( "option", "position", "center" );},
            modal: true,
            width:1020,
            top:0,
            left:10


        })

Answer 4

你可以用一点CSS来解决这个问题。

让我们假设您的HTML结构如下所示：

<div id="modal-container"><div id="modal-dialog"></div></div>

#modal-container { position: fixed; width: 100%; height: 100%; }
#modal-dialog { width: 1020px; margin: auto; }

从本质上讲，您只需要一个容器，其position: fixed位于HTML文档正文的根目录下方。这样，容器的宽度和高度将等于窗口宽度和高度。在其中，设置对话框的宽度和margin: auto将确保它水平居中，因为它会根据整个窗口的宽度自动设置其边距。

Answer 5

亚西尔，

我确定缺少两个属性：

.dialog({
    title: $(this).attr("data-dialog-title"),
    close: function() { $(this).remove() },
    modal: true,
    width: 1020,
    height: 800,
    position: 'center'
});

我认为应该工作。

Jquery Modal弹出窗口显示在屏幕中央

5 个答案: