web-dev-qa-db-ja.com

ダイアログ内でjQueryダイアログを閉じる方法は？

閉じるボタンを使用せずにダイアログ内でjQueryダイアログを閉じる方法は？

Uiダイアログ内には単純なフォームリクエストがあり、送信に成功すると、uiダイアログは自動的に閉じて親ページを更新します。

    <script type="text/javascript">
        $(document).ready(function () {
            $("#form-dialog").dialog({
                autoOpen: true,
                modal: true,
                width: 200,
                draggable: true,
                resizable: true
            });
        });
    </script>


    <div id="form-dialog" title="Form Submit">
    <form action="default.aspx" method="post">
    <input type="text" name="name" value=" " />    
    <input type="submit" value="submit" />

    <a href="#" id="btnDone">CLOSE</a>

    <script type="text/javascript">
    $(document).ready(function () {
        $("#btnDone").click(function () {
            $(this).dialog('close');
        });
    });
    </script>

    </form>
    </div>

-imperialx

jqueryjquery-uijquery-ui-dialog
64
imperialx

これを試して

$(this).closest('.ui-dialog-content').dialog('close');

その中のダイアログを閉じます。

68
Kunal

呼び出すことでプログラムで閉じることができます

$('#form-dialog').dialog('close')

いつでも好きなときに。

61
Jason

あなたが必要

$('selector').dialog('close');
17
redsquare

ダイアログ内のiframeから閉じる：

window.parent.$('.ui-dialog-content:visible').dialog('close');
9
Der_Meister
$(this).parents(".ui-dialog-content").dialog('close')

単純な、私はしないことを確認したい：

  1. ハードコードダイアログの#id値。
  2. すべてのダイアログを閉じます。
7
ndrix

上記のすべての答えを運なしでチェックした後、次のコードが問題を解決するために私のために働いた：

$(".ui-dialog").dialog("close");

代替手段を探しているなら、これも良い試みになるでしょう。

5
Marco

1つの文字列を

$("#form-dialog").dialog('close');

ここで$（this）は別のオブジェクトを意味します$（ "＃btnDone"）

 <script type="text/javascript">
    $(document).ready(function () {
        $("#form-dialog").dialog({
            autoOpen: true,
            modal: true,
            width: 200,
            draggable: true,
            resizable: true
        });
    });
</script>


<div id="form-dialog" title="Form Submit">
<form action="default.aspx" method="post">
<input type="text" name="name" value=" " />    
<input type="submit" value="submit" />

<a href="#" id="btnDone">CLOSE</a>

<script type="text/javascript">
$(document).ready(function () {
    $("#btnDone").click(function () {
 //I've replaced next string
 // $(this) here means another object $("#btnDone")
  $("#form-dialog").dialog('close');
    });
});
</script>

</form>
</div>
3
Bart

        $(document).ready(function () {
            $("#form-dialog").dialog({
                autoOpen: true,
                modal: true,
                width: 200,
                draggable: true,
                resizable: true,
                buttons: {
                    "Close": function () {
                        $("#idDialog").dialog("close");
                    }
                }
            });
        });

これにより、閉じるボタンが表示されます。関数closeを呼び出すこともできます

$("#idDialog").dialog("close");

これを行ういくつかの関数で。またはボタン/ a

< a href="javascript:void(0);" id="btnDone"   
                              onClick="$("#idDialog").dialog("close");">CLOSE</a>

編集：ダイアログをフォームに含めるにはこれが必要です：

open: function (type, data) {
            $(this).parent().appendTo($("form:first"));
        }
0
Michel Ayres

オープンでこのリンクを追加する

$(this).parent().appendTo($("form:first"));

完全に動作します。

0
Shan

より良い方法は、「閉じる」の代わりに「破棄して削除する」ことです。DOMからダイアログの「html」を削除します

$(this).closest('.ui-dialog-content').dialog('destroy').remove();
0
Vladimir Miroshnichenko