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

Question

В настоящее время я работаю над редактированием и удалением страниц для базы данных компании.

edit.php

Я пытаюсь заставить PHP проверить, что форма была успешно отправлена ​​(она отправляет самому себе), и после того, как эта проверка будет выполнена, она выдаст модальное окно jquery, информирующее пользователя, что форма была успешно отредактирована.

delete.php

Эта страница действительно необходима? Я мог бы довольно легко настроить его с помощью процедур DreamWeaver, но мне кажется трудным отображать новую страницу для удаления простой записи.

На каждой панели навигации есть ссылка для каждой отображаемой записи, помеченная как «удалить». В идеале я хотел бы визуализировать другое модальное окно jQuery после нажатия на эту кнопку, чтобы подтвердить, действительно ли пользователь хочет удалить запись.

Если щелкнуть ДА, появится другое сообщение, сообщающее пользователю, что запись была удалена. пользователь будет перенаправлен на другую страницу.

Если щелкнуть НЕТ, диалоговое окно просто закроется.

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

Answer 1

Я бы предложил использовать jQuery UI , который имеет реализацию в диалоговом окне. Код на этой странице имеет различные примеры, в том числе те, которые будут хорошо работать для страницы редактирования

Затем, чтобы удалить запись, у вас может быть диалоговое окно jquery, и если пользователь нажимает Ok, используйте функции jQuery ajax, чтобы опубликовать необходимые данные в delete.php, который затем будет выполнять удаление. Сторона jquery будет выглядеть примерно так:

$(function() {
    $("#dialog").dialog({
        bgiframe: true,
        resizable: false,
        height:140,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            'Delete this item': function() {
                                    //ajax request here

                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });
});