Как закрыть диалог jQuery в диалоге? - PullRequest
63 голосов
/ 29 мая 2010

Как закрыть диалоговое окно jQuery в диалоговом окне, не используя кнопку закрытия?

Внутри диалогового окна пользовательского интерфейса находится простой запрос формы, и в случае успешной отправки диалоговое окно пользовательского интерфейса автоматически закрывает и обновляет родительскую страницу..

    <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

Ответы [ 10 ]

68 голосов
/ 22 сентября 2011

Попробуйте

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

Он закроет диалоговое окно внутри него.

60 голосов
/ 29 мая 2010

вы можете закрыть его программно, вызвав

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

когда хочешь.

16 голосов
/ 29 мая 2010

Вам нужно

$('selector').dialog('close');
8 голосов
/ 23 июля 2014

Закрыть из iframe внутри диалога:

window.parent.$('.ui-dialog-content:visible').dialog('close');
7 голосов
/ 01 мая 2012
$(this).parents(".ui-dialog-content").dialog('close')

Простой, я хотел бы убедиться, что я не:

  1. Жесткий код диалога #id значения.
  2. Закрыть все диалоги.
4 голосов
/ 07 февраля 2017

После проверки всех этих ответов выше без удачи, фоллинг-код сработал для меня, чтобы решить проблему:

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

Может быть, это будет хорошая попытка, если вы ищете альтернативы.

3 голосов
/ 07 декабря 2011

заменить одну строку на

$("#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>
0 голосов
/ 27 октября 2018

лучший способ - «уничтожить и удалить» вместо «закрыть» он удалит диалог "html" из DOM

$(this).closest('.ui-dialog-content').dialog('destroy').remove();
0 голосов
/ 13 июля 2013

Добавление этой ссылки в открытую

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

отлично работает.

0 голосов
/ 01 апреля 2011

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

EDIT: это необходимо для включения вашего диалога в форму:

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