0

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

行动

@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

4

5 回答 5

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);
    });
于 2012-07-30T07:55:09.317 回答
1

我有一个类似的问题，中心对我不起作用的两个原因......

第一次我没有包含位置 javascript 库/类，所以即使所有代码都是正确的，我不得不手动设置高度，直到我意识到jquery.ui.position缺少

在我整理好之后，它正确居中，但是页面正在运行，我看不到模式，发生的事情是我的链接将页面重定向到自身并向上滚动，return false;在函数的末尾添加dialog{}解决了它。

于 2012-12-13T00:31:40.553 回答
0

打开后尝试定位。

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


        })
于 2012-07-30T06:22:58.020 回答
0

你可以用一点 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对话框的宽度和将确保它水平居中，因为它会根据整个窗口的宽度自动设置其边距。

于 2012-07-30T06:23:33.490 回答
0

亚瑟，

我确定只有两个属性缺失：

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

我认为应该工作。

于 2012-07-30T09:54:43.813 回答