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

Ответ 1

Поскольку это проявляется в начале поиска для создания динамического диалога в jquery, я хотел бы указать лучший способ сделать это. Вместо добавления диалогов div и контента в HTML и последующего вызова его вы можете сделать это намного проще, перетащив HTML непосредственно в объект jquery, так:

$(function () {
    $("a:contains('sometext')").click(function() {
        var NewDialog = $('<div id="MenuDialog">\
            <p>This is your dialog content, which can be multiline and dynamic.</p>\
        </div>');
        NewDialog.dialog({
            modal: true,
            title: "title",
            show: 'clip',
            hide: 'clip',
            buttons: [
                {text: "Submit", click: function() {doSomething()}},
                {text: "Cancel", click: function() {$(this).dialog("close")}}
            ]
        });
        return false;
    });
});

Я также показал, как вы можете поместить несколько кнопок с встроенными функциями вместо привязки функции live() к кнопке. Я использовал этот метод в нескольких местах, и он отлично работает для меня. Он также поддерживает формы (я захватил данные в doSomething() и передал через ajax, но другие методы тоже работают) и т.д.

Ответ 2

Вероятно, вы не должны использовать идентификаторы для динамически созданного контента, так как в итоге вы можете использовать более одного элемента с тем же идентификатором, что означает, что document.getElementById (который я предполагаю, что использование sizzle для селектора #id) вернется только первый (потенциально невидимый).

Ответ 3

Мне нужен был способ использования веб-службы JSON для управления такими вещами, как предупреждения и обновления на стороне клиента, без того, чтобы клиент инициировал действие. Я надеюсь обновить это, чтобы использовать веб-сокеты, но на данный момент это временное нажатие, и каждое нажатие включает в себя задержку для следующего нажатия, поэтому я могу даже управлять этим, как только клиент загрузил мою систему.

Я также использую show/expire и moment.js для фильтрации по дате, а затем с помощью файлов cookie с идентификатором каждого предупреждения (не показано здесь), чтобы предотвратить дублирование уведомлений. Это идет хорошо, и я мог бы просто решить, как упаковать его как библиотеку слишком долго, если я получу достаточный интерес.

Бит, специфичный для этого вопроса, - это 2 части; 1) JSON, который включает в себя параметры для jQuery.dialog() и 2) Код для использования этого JSON и создание диалога. Ключевым моментом здесь является обратить внимание на то, как я ссылаюсь на параметры объекта "n" и их использование для динамического создания диалога. Объект tDlg является большой частью этого, так как он в конечном итоге представляет диалог и передается в $(). Dialog()

JSON Snippet, который включает мои параметры диалога:

"doAlert":{
                "modal":false
                ,"height":240
                ,"width":380
                ,"title":"Welcome to the new BatchManager"
                ,"body":"<div style='text-align:center;'>Welcome to the new and enhanced<br/>BatchManager!</div><div style='text-align:center;'>Enjoy!</div>"
                ,"buttons":[
                    {
                        "text":"Ok"
                        ,"click":"$(this).dialog('close');"
                    }
                ]
            }

фрагмент JavaScript (с использованием jQuery) для инициализации диалога, основанного на моем JSON (n соответствует doAlert, который является частью массива "уведомлений" в этом примере):

var tDlg = {
    resizable: false,
    height: (n.doAlert.height) ? n.doAlert.height : 240,
    width: (n.doAlert.width) ? n.doAlert.width : 240,
    modal: (n.doAlert.modal) ? n.doAlert.modal : true,
    dialogClass: "dlgFont"
};
if (n.doAlert.buttons) {
    tDlg.buttons = [];
    $.each(n.doAlert.buttons, function (i, n) {
            tDlg.buttons.push({
                            text: n.text,
                            click: new Function(n.click)
                    })
    })
}
$('<div class="dlgFont" title="' + n.doAlert.title + '"><p><span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 50px 0;"></span>' + n.doAlert.body + '</div>').dialog(tDlg);

Ответ 4

Несколько моментов, о которых нужно подумать:

• OnDialogClose вам следует отсоединить #MenuDialog от DOM, чтобы избежать нескольких объектов с одинаковым идентификатором, или вы можете проверить, существует ли div#MenuDialog до его добавления.

• var Selector = $("a:contains('sometext')"); - бессмысленная строка, если вы не используете ее еще где.

• Вы используете $('#MenuDialog') несколько раз. Было бы лучше назначить его переменной вместо запроса var Selector = $('#MenuDialog'); снова и снова.

Ответ 5

Лично мне это удалось:

1) Создайте html диалогового окна с двумя пробелами с xxx в качестве значения по умолчанию

<div id="dialog1" title="Title of the dialog">
    <p>There are two variables: <span id="var1">xxx</span> and
    <span id="var2">xxx</span></p>
</div>

2) Сделайте div готовым для диалога

$(function() {
    $( "#dialog1").dialog({
    autoOpen:false,
        modal: true,
        buttons: {
        "Button 1": function() {
            $(this).dialog( "close" );
        },
        "Button 2": function() {
            $(this).dialog( "close" );
        }
    }
    });
});

3) И изменив значение двух пространств с помощью этой функции, перед тем, как начать диалог:

function showDialog(value1,value2){
    $("#var1").html(value1);
    $("#var2").html(value2);
    $( "#dialog1").dialog('open');
} 

4) Итак, когда вам это нужно, вызовите функцию таким образом

showDialog('tom','jerry'); 

Вы можете попробовать это на http://jsfiddle.net/sekmo/L46vb/1/