0

次のjqueryコードを使用して、MVC 3でアクションをクリックするとモーダルポップアップを開きます.

アクション

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

Jクエリ

     $(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

同様の問題がありました。センタリングが機能しなかった2つの理由...

初めて位置の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

ヤセル、

2つのプロパティだけが欠けていると確信しています:

.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 に答える