19

jquery UI ダイアログを使用して ASP.NET Web サイトのデータ行を変更しています。ダイアログを開くときに、下にあるフォームにダイアログを追加すると、ポストバックを使用できるようになります。$('#' + id).parent().appendTo($("form"));

しかし、ダイアログのプロパティを設定するmodal: trueと、背景が灰色になるだけでなく、ダイアログも灰色になり、アクセスできなくなります。

を削除する$('#' + id).parent().appendTo($("form"));と、想定どおりに機能しますが、ポストバックを使用できません。

私は何か間違ったことをしていますか、それともこれを機能させるためのポイントを逃していますか?

.aspx の上にある Javascript

<script type="text/javascript">
    $(document).ready(function () {

        $('#workDialog').dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            width: 800,
            height: "auto",
            modal: true
        });
    });

    function showDialog(id) {
        $('#' + id).parent().appendTo($("form"));
        $('#' + id).dialog("open");
    }

    function closeModalDiv(id) {
        $('#' + id).dialog("close");
    }
</script>

ダイアログを含む div

<div id="workDialog" title="Basic dialog">
    <asp:UpdatePanel ID="upWorkDialog" runat="server" UpdateMode="Conditional">  <ContentTemplate>
        <table id="Table1" class="item">
        <tr>
            ...
        </tr>
        <tr>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
            <td><asp:TextBox ID="txt...></asp:TextBox></td>
        </tr>
        </table>
        <asp:Label ID="lblWorkEditError" runat="server" Text=""></asp:Label>

        <asp:Button ID="btnSave" runat="server" Text="Gem" OnClick="btnSave_Click" />
        <asp:Button ID="btnCancel" runat="server" Text="Annuller" OnClientClick="javascript:closeModalDiv('workDialog');" />
    </ContentTemplate></asp:UpdatePanel>
</div>
4

8 に答える 8

28

これは1.10.0の既知のバグであり、古いバージョンでは正常に機能しますが、ui-dialogスタイルのz-indexを変更することで解決しました

スタイルシートまたはページに次のスタイルを追加します

.ui-dialog
{
    z-index: 101;
}

または、jquery-ui-1.10.0 cssで.ui-dialogクラスを見つけて、「z-index：101;」を追加します。スタイルルール

今ページをリロードし、ITは動作します...

于 2013-02-09T10:13:02.310 に答える
6

これは 1.10.0 の既知のバグです。オーバーレイの z-index を変更することで解決しました。

$('#workDialog').dialog({
            modal: true,
            width: 400,
            height: 200,
            appendTo: $("form:first")
        });
        var dz = $(".ui-front").css("z-index")
        $(".ui-widget-overlay").css({ "z-index": dz - 1 });
        $(".ui-widget-overlay").appendTo($("form:first"));
于 2013-02-01T12:05:45.520 に答える
4

作成後にダイアログを移動することはできません。最も簡単で最善の修正は、 appendToをダイアログの初期化に移動することだと思います。

<script type="text/javascript">
$(document).ready(function () {

    $('#workDialog').dialog({
        autoOpen: false,
        draggable: true,
        resizable: false,
        width: 800,
        height: "auto",
        modal: true,
    appendTo: "#aspnetForm" // moved append to where the dialog i created
    });
});

function showDialog(id) {
    $('#' + id).dialog("open");
}

function closeModalDiv(id) {
    $('#' + id).dialog("close");
}
</script>
于 2013-05-09T12:23:40.347 に答える
1

バージョン 1.10.0 以降、モーダルの回避策が機能しなくなったようです。jQuery UI バージョンを 1.9.2 にダウングレードすると、再び機能するはずです。

于 2013-02-01T11:34:48.237 に答える
0

私は試してみましたが、うまくいくはずです。行をコメントアウトしてみてください

 $('#' + id).parent().appendTo($("form"));

ダイアログを初期化する場所を変更して、変数 dlg2 でオブジェクトを取得します

var dlg2 = $("#dialog1").dialog({
    autoOpen: false,
    draggable: true,
    resizable: false,
    width: 800,
    height: "auto",
    modal: true,
    open: function (type, data) { $(this).parent().appendTo("form"); }
});

ダイアログを初期化した直後にこの行を追加します。

$(dlg2).parent().appendTo($("form"));

ダイアログは 1 つしかありませんか? オープンコードを追加するダイアログ宣言で初期化してみることができます:

$("#dialog1").dialog({
    autoOpen: false,
    draggable: true,
    resizable: false,
    width: 800,
    height: "auto",
    modal: true,
    open: function (type, data) { $(this).parent().appendTo("form"); }
});

リンク: ASP.NET ボタン ポストバックを使用した jQuery UI ダイアログ

于 2013-01-31T22:38:20.013 に答える
0

以下のコードは、問題を解決することを示しています。

<script type="text/javascript">
    $(document).ready(function () {

        $('#workDialog').dialog({
            autoOpen: false,
            draggable: true,
            resizable: false,
            width: 800,
            height: "auto",
            modal: true,
            appendTo: "form"
        });
    });

    function showDialog(id) {
        $('#' + id).dialog("open");
    }

    function closeModalDiv(id) {
        $('#' + id).dialog("close");
    }
</script>

jQuery UI v1.10 では、appendTo プロパティが追加されました。これは、.parent().appendTo($("form")) を呼び出すのと同じことを行うようです。ダイアログは灰色の背景の上に表示されます。そして、ポストバックは機能します。

于 2013-05-27T06:40:06.587 に答える
0

showDialog 関数の 2 行目に、z-index の CSS セットを追加します。次のようになります。

function showDialog(id) {
    $('#' + id).parent().appendTo($("form"));
    $('#' + id).dialog("open").css({"z-index":"101"});
}
于 2013-11-23T15:42:24.903 に答える