Как закрыть диалог jQuery в диалоговом окне?

Как закрыть диалог 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>

jquery jquery-ui jquery-ui-dialog
person imperialx    schedule 29.05.2010    source источник

Ответы (12)


arrow_upward
69
arrow_downward

Попробуй это

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

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

person Kunal    schedule 21.09.2011
comment
Хорошо, когда у вас есть динамический html вместо ссылки на элемент - person Stefan Pintilie; 24.05.2019

arrow_upward
67
arrow_downward

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

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

когда угодно.

person Jason    schedule 29.05.2010
comment
Но тег формы находится внутри диалогового окна пользовательского интерфейса. Никаких файлов jquery внутри диалогового окна пользовательского интерфейса, только отправка тега простой формы. Как я могу использовать $ ('# form-dialog'). Close () внутри # form-dialog? Это похоже на само закрытие после того, как вы что-то щелкнули, или когда в диалоговом окне пользовательского интерфейса сработает таймер ожидания. - person imperialx; 29.05.2010
comment
если вы используете jquery для открытия диалогового окна, вы можете использовать jquery, чтобы закрыть его. в строке прямо под тем местом, где вы объявляете диалог, установите $('#mySubmitButton').live('click', function() { mySubmitFunction(); $('#form-dialog').close(); }); - person Jason; 29.05.2010
comment
Да, но как насчет того, чтобы я был внутри диалога? Я думаю, что эквивалент этого - что-то вроде $ (window) .unload (), где всплывающая форма автоматически закрывается, а не нажимает кнопку закрытия jquery-ui-dialog. - person imperialx; 29.05.2010
comment
чувак. как узнать, что пользователь завершил работу с вашей формой? в любой момент вызвать $('#form-dialog').close() - person Jason; 29.05.2010
comment
У меня похожая проблема, но я не думаю, что она была отмечена как ответ ... stackoverflow.com/questions/1644365/ - person imperialx; 29.05.2010
comment
это не сработает .... вам нужен $ ('selector'). dialog ('close') просто .close не будет работать - person redsquare; 29.05.2010
comment
эээ ... да, что сказал @redsquare - person Jason; 29.05.2010

arrow_upward
19
arrow_downward

Тебе нужно

$('selector').dialog('close');
person redsquare    schedule 29.05.2010
comment
Привет, redsquare, я добавил несколько строк в свой код выше, могу ли я узнать, почему он не закрывает диалоговое окно? Как видите, кнопка закрытия находится внутри пользовательского диалога. Спасибо. - person imperialx; 29.05.2010
comment
потому что в вашем случае это относится к кнопке, а не к диалогу - person redsquare; 29.05.2010
comment
измените $ (this) на $ (# form-dialog) - person redsquare; 29.05.2010

arrow_upward
13
arrow_downward

Закройте окно iframe внутри диалогового окна:

window.parent.$('.ui-dialog-content:visible').dialog('close');
person Der_Meister    schedule 23.07.2014

arrow_upward
8
arrow_downward 

$(this).parents(".ui-dialog-content").dialog('close')

Все просто, я хочу убедиться, что не делаю:

  1. жесткий код диалога # значения идентификатора.
  2. Закройте все диалоги.
person ndrix    schedule 01.05.2012

arrow_upward
5
arrow_downward

После безуспешной проверки всех вышеперечисленных ответов следующий код помог мне решить проблему:

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

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

person Marco    schedule 07.02.2017

arrow_upward
3
arrow_downward

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

$("#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>
person Bart    schedule 07.12.2011

arrow_upward
2
arrow_downward

Использование $(this).dialog('close'); работает только внутри функции нажатия кнопки в модальном окне. Если ваша кнопка находится вне диалогового окна, как в этом примере, укажите селектор:

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

Для получения дополнительной информации см. документацию.

person kurdtpage    schedule 19.09.2019

arrow_upward
0
arrow_downward

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

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

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

person Shan    schedule 13.07.2013

arrow_upward
0
arrow_downward 


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

РЕДАКТИРОВАТЬ: вам нужно это, чтобы включить диалог в форму:

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

arrow_upward
0
arrow_downward

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

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

arrow_upward
0
arrow_downward

Если вы используете jconfirm, способ его программного закрытия следующий:

jconfirm.instances[0].close();
person Mauro Bilotti    schedule 11.03.2021