0

4 つの画像ボタンを持つ JQuery モーダル フォームがあります。モーダル ボックスが開いてそれらのボタンをクリックしても、何も起こりません。ボックスが開くとフォームの外に移動することはわかっていますが、元に戻す方法がわかりません。.parent().appendTo($("form")); でいくつかのバリエーションを試しました。さまざまな方法でそれを変更しましたが、成功していません。現在、それを使用するとボックスが開きますが、画面全体が暗くなり、ボタンをクリックできません。これが私のJQuery関数です：

 <script type="text/javascript">
    $(function () {
        $("#Change").dialog({
            resizable: false,
            draggable: false,
            width: 800,
            modal: true,
            show: { effect: 'fadeIn', duration: 500 },
            hide: { effect: 'fadeOut', duration: 300 },
            autoOpen: false,
            open: function (type, data) {
                $(this).parent().appendTo($("form"));
            }
        });

        $("#ui-dialog-title-dialog").hide();
        $(".ui-dialog-titlebar").removeClass('ui-widget-header');

        $("#openChange1").click(function () {
            $("#<%=txtCardChange.ClientID %>").val("1");
            $("#Change").dialog("open");
            $('.ui-widget-overlay').live("click", function () {
                $("#Change").dialog("close");

            });
            return false;
        });

    });
</script>

必要に応じて、モーダル フォームを呼び出すための HTML を次に示します。

<a id="openChange1" href="#" style="color: Red">Change Card</a>

モーダル フォームの html は、単純な div タグ内にあります。

        <div id="Change">
            \\html here
        </div>

ですから、どんな助けでも大歓迎です。必要に応じて、Visual Studio 2012 と .NET 4.0 を使用しています。ボタンの背後にあるコードは C# です。お時間をいただきありがとうございます。

4

4 に答える 4

2

以下のように解決したのと同じ問題がありました。

<script type="text/javascript">
    $(function () {
        $("#Change").dialog({
            resizable: false,
            draggable: false,
            width: 800,
            modal: true,
            show: { effect: 'fadeIn', duration: 500 },
            hide: { effect: 'fadeOut', duration: 300 },
            autoOpen: false,
            appendTo: "form"
        });

        $("#ui-dialog-title-dialog").hide();
        $(".ui-dialog-titlebar").removeClass('ui-widget-header');

        $("#openChange1").click(function () {
            $("#<%=txtCardChange.ClientID %>").val("1");
            $("#Change").dialog("open");
            $('.ui-widget-overlay').live("click", function () {
                $("#Change").dialog("close");

            });
            return false;
        });

    });
</script>

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

于 2013-05-27T06:46:04.983 に答える
1

あなたが言及したように、JQuery はダイアログの内容をページ本体の直接の子に移動して、いくつかのレンダリングの問題を解決します: http://forum.jquery.com/topic/preventing-dialog-from-rearranging-dom-flow

問題は、ボタンをすぐに戻すと、画面の残りの部分を暗くし、ダイアログをモーダルにする (つまり、クリック イベントを食べる) ために使用される「オーバーレイ」div によって、ボタンのクリックが元の場所で発生しなくなることです。

1 つの解決策は、モーダルに Change div のクローンを使用し、元のボタンで click() を呼び出すクリック ハンドラーをバインドすることです。

もう 1 つのオプションは、通常の HTML フォームに送信させる代わりに、ボタンで .NET のポストバック メソッドを呼び出すようにすることです。

__doPostBack("ctl00$button_name_here");
于 2013-04-10T18:33:35.740 に答える
1 
<asp:LinkButton runat="server" id="openChange1" onclientclick="openChange1Click()" />

<script type="text/javascript">
function openChange1Click () {
        $("#<%=txtCardChange.ClientID %>").val("1");
        $("#Change").dialog("open");
        $('.ui-widget-overlay').live("click", function () {
            $("#Change").dialog("close");

        });
        return false;
    }
</script>
于 2013-04-10T18:12:57.527 に答える
0

わかりました、助けてくれてありがとう、それは私を正しい方向に導きました。

    $(function () {
        $("#Change").dialog({
            resizable: false,
            draggable: false,
            width: 400,
            modal: true,
            show: { effect: 'fadeIn', duration: 500 },
            hide: { effect: 'fadeOut', duration: 500 },
            autoOpen: false,
            open: function (type, data) {
                $(this).parent().appendTo("form:first");
            }
        }).parent().css('z-index', '1005');

        $("#ui-dialog-title-dialog").hide();
        $(".ui-dialog-titlebar").removeClass('ui-widget-header');
        $("#Change").hide().show();

        $("#openChange1").click(function () {
            $("#<%=txtCardChange.ClientID %>").val("1");
            $("#Change").dialog("open");
            $('.ui-widget-overlay').live("click", function () {
                $("#Change").dialog("close");
            });
            return false;
        });
    });
于 2013-04-11T18:30:40.247 に答える