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

Поскольку это проявляется в начале поиска создания динамического диалога в 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, но другие методы тоже работают) и т. д.

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

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

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

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

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

"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);

Несколько моментов для размышления:

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

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

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

Лично у меня получилось так:

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/.