Подтвердить удаление модального / диалогового windows с загрузкой Twitter?

У меня есть таблица HTML строк, привязанных к строкам базы данных. Я хотел бы иметь ссылку «удалить строку» для каждой строки, но я хотел бы заранее подтвердить ее. Есть ли способ сделать это, используя модальный диалог Twitter-загрузки?

12 Solutions collect form web for “Подтвердить удаление модального / диалогового windows с загрузкой Twitter?”

Рецепт GET

Для этой задачи вы можете использовать уже доступные плагины и расширения для начальной загрузки. Или вы можете создать собственное всплывающее окно с тремя строками кода. Проверьте это.

Скажем, у нас есть эти ссылки (обратите внимание на data-href вместо href ) или кнопки, которые мы хотим удалить для подтверждения:

 Delete record #23  

Здесь #confirm-delete указывает на модальный всплывающий div в вашем HTML. Он должен иметь кнопку «ОК», настроенную следующим образом:

  

Теперь вам нужен только этот маленький javascript для подтверждения действия удаления:

 $('#confirm-delete').on('show.bs.modal', function(e) { $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href')); }); 

Таким образом, на show.bs.modal удаления show.bs.modal события href устанавливается URL с соответствующим идентификатором записи.

Демо: http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview


Рецепт POST

Я понимаю, что в некоторых случаях может потребоваться выполнить запрос POST или DELETE, а не GET. Это все еще довольно просто, без лишнего кода. Взгляните на демо ниже с таким подходом:

 // Bind click to OK button within popup $('#confirm-delete').on('click', '.btn-ok', function(e) { var $modalDiv = $(e.delegateTarget); var id = $(this).data('recordId'); $modalDiv.addClass('loading'); $.post('/api/record/' + id).then(function() { $modalDiv.modal('hide').removeClass('loading'); }); }); // Bind to modal opening to set necessary data properties to be used to make request $('#confirm-delete').on('show.bs.modal', function(e) { var data = $(e.relatedTarget).data(); $('.title', this).text(data.recordTitle); $('.btn-ok', this).data('recordId', data.recordId); }); 
 // Bind click to OK button within popup $('#confirm-delete').on('click', '.btn-ok', function(e) { var $modalDiv = $(e.delegateTarget); var id = $(this).data('recordId'); $modalDiv.addClass('loading'); setTimeout(function() { $modalDiv.modal('hide').removeClass('loading'); }, 1000); // In reality would be something like this // $modalDiv.addClass('loading'); // $.post('/api/record/' + id).then(function() { // $modalDiv.modal('hide').removeClass('loading'); // }); }); // Bind to modal opening to set necessary data properties to be used to make request $('#confirm-delete').on('show.bs.modal', function(e) { var data = $(e.relatedTarget).data(); $('.title', this).text(data.recordTitle); $('.btn-ok', this).data('recordId', data.recordId); }); 
 .modal.loading .modal-content:before { content: 'Loading...'; text-align: center; line-height: 155px; font-size: 20px; background: rgba(0, 0, 0, .8); position: absolute; top: 55px; bottom: 0; left: 0; right: 0; color: #EEE; z-index: 1000; } 
      Delete "The first one", #23  

http://bootboxjs.com/ – последние работы с Bootstrap 3.0.0

Самый простой пример:

 bootbox.alert("Hello world!"); 

С сайта:

В библиотеке представлены три метода, предназначенные для имитации их родных эквивалентов JavaScript. Их точные сигнатуры методов являются гибкими, так как каждый может принимать различные параметры для настройки меток и указывать значения по умолчанию, но их чаще всего называют так:

 bootbox.alert(message, callback) bootbox.prompt(message, callback) bootbox.confirm(message, callback) 

Вот fragment этого действия (нажмите «Выполнить fragment кода» ниже):

 $(function() { bootbox.alert("Hello world!"); }); 
       
  // ---------------------------------------------------------- Generic Confirm function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) { var confirmModal = $(''); confirmModal.find('#okButton').click(function(event) { callback(); confirmModal.modal('hide'); }); confirmModal.modal('show'); }; // ---------------------------------------------------------- Confirm Put To Use $("i#deleteTransaction").live("click", function(event) { // get txn id from current table row var id = $(this).data('id'); var heading = 'Confirm Transaction Delete'; var question = 'Please confirm that you wish to delete transaction ' + id + '.'; var cancelButtonTxt = 'Cancel'; var okButtonTxt = 'Confirm'; var callback = function() { alert('delete confirmed ' + id); }; confirm(heading, question, cancelButtonTxt, okButtonTxt, callback); }); 

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

http://www.petefreitag.com/item/809.cfm

Сначала загрузите jquery

 $(document).ready(function() { $('a[data-confirm]').click(function(ev) { var href = $(this).attr('href'); if (!$('#dataConfirmModal').length) { $('body').append(''); } $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm')); $('#dataConfirmOK').attr('href', href); $('#dataConfirmModal').modal({show:true}); return false; }); }); 

Тогда просто спросите любой вопрос / подтверждение href:

 Delete 

Таким образом, мода подтверждения является намного более универсальной, поэтому ее можно легко повторно использовать в других частях вашего сайта.

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

Итак, вот моя модифицированная версия общей функции confirm которая отлично работала:

 /* Generic Confirm func */ function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) { var confirmModal = $(''); confirmModal.find('#okButton').click(function(event) { callback(); confirmModal.modal('hide'); }); confirmModal.modal('show'); }; /* END Generic Confirm func */ 

Я нашел это полезным и простым в использовании, плюс он выглядит довольно: http://maxailloud.github.io/confirm-bootstrap/ .

Чтобы использовать его, включите файл .js на своей странице, а затем запустите:

 $('your-link-selector').confirmModal(); 

Существуют различные варианты, которые вы можете применить к нему, чтобы он выглядел лучше, когда делал это, чтобы подтвердить удаление, я использую:

 $('your-link-selector').confirmModal({ confirmTitle: 'Please confirm', confirmMessage: 'Are you sure you want to delete this?', confirmStyle: 'danger', confirmOk: ' Delete', confirmCallback: function (target) { //perform the deletion here, or leave this option //out to just follow link.. } }); 

Я могу легко справиться с этим типом задачи, используя библиотеку bootbox.js. Сначала вам нужно включить JS-файл bootbox. Затем в вашей функции обработчика событий просто напишите следующий код:

  bootbox.confirm("Are you sure to want to delete , function(result) { //here result will be true // delete process code goes here }); 

Официальный сайт bootboxjs

Следующее решение лучше, чем bootbox.js , потому что

  • Он может делать все, что может сделать bootbox.js;
  • Синтаксис использования проще
  • Это позволяет вам элегантно управлять цветом вашего сообщения, используя «ошибку», «предупреждение» или «информацию»,
  • Bootbox имеет длину 986 строк, у меня всего 110 строк

digimango.messagebox.js :

 const dialogTemplate = '\ '; // See the comment inside function digimango_onOkClick(event) { var digimango_numOfDialogsOpened = 0; function messageBox(msg, significance, options, actionConfirmedCallback) { if ($('#digimango_MessageBoxContainer').length == 0) { var iDiv = document.createElement('div'); iDiv.id = 'digimango_MessageBoxContainer'; document.getElementsByTagName('body')[0].appendChild(iDiv); $("#digimango_MessageBoxContainer").html(dialogTemplate); } var okButtonName, cancelButtonName, showTextBox, textBoxDefaultText; if (options == null) { okButtonName = 'OK'; cancelButtonName = null; showTextBox = null; textBoxDefaultText = null; } else { okButtonName = options.okButtonName; cancelButtonName = options.cancelButtonName; showTextBox = options.showTextBox; textBoxDefaultText = options.textBoxDefaultText; } if (showTextBox == true) { if (textBoxDefaultText == null) $('#digimango_messageBoxTextArea').val(''); else $('#digimango_messageBoxTextArea').val(textBoxDefaultText); $('#digimango_messageBoxTextArea').show(); } else $('#digimango_messageBoxTextArea').hide(); if (okButtonName != null) $('#digimango_messageBoxOkButton').html(okButtonName); else $('#digimango_messageBoxOkButton').html('OK'); if (cancelButtonName == null) $('#digimango_messageBoxCancelButton').hide(); else { $('#digimango_messageBoxCancelButton').show(); $('#digimango_messageBoxCancelButton').html(cancelButtonName); } $('#digimango_messageBoxOkButton').unbind('click'); $('#digimango_messageBoxOkButton').on('click', { callback: actionConfirmedCallback }, digimango_onOkClick); $('#digimango_messageBoxCancelButton').unbind('click'); $('#digimango_messageBoxCancelButton').on('click', digimango_onCancelClick); var content = $("#digimango_messageBoxMessage"); if (significance == 'error') content.attr('class', 'text-danger'); else if (significance == 'warning') content.attr('class', 'text-warning'); else content.attr('class', 'text-success'); content.html(msg); if (digimango_numOfDialogsOpened == 0) $("#digimango_messageBox").modal(); digimango_numOfDialogsOpened++; } function digimango_onOkClick(event) { // JavaScript's nature is unblocking. So the function call in the following line will not block, // thus the last line of this function, which is to hide the dialog, is executed before user // clicks the "OK" button on the second dialog shown in the callback. Therefore we need to count // how many dialogs is currently showing. If we know there is still a dialog being shown, we do // not execute the last line in this function. if (typeof (event.data.callback) != 'undefined') event.data.callback($('#digimango_messageBoxTextArea').val()); digimango_numOfDialogsOpened--; if (digimango_numOfDialogsOpened == 0) $('#digimango_messageBox').modal('hide'); } function digimango_onCancelClick() { digimango_numOfDialogsOpened--; if (digimango_numOfDialogsOpened == 0) $('#digimango_messageBox').modal('hide'); } 

Вы можете попробовать еще многократно использовать мое решение с функцией обратного вызова . В этой функции вы можете использовать запрос POST или некоторую логику. Используемые библиотеки: JQuery 3> и Bootstrap 3> .

https://jsfiddle.net/axnikitenko/gazbyv8v/

Код HTML для теста:

 ...  Test Remove Action  ... 

Javascript:

 $(function () { function remove() { alert('Remove Action Start!'); } // Example of initializing component data this.cmpModalRemove = new ModalConfirmationComponent('remove-data', remove, 'remove-btn-a-id', { txtModalHeader: 'Header Text For Remove', txtModalBody: 'Body For Text Remove', txtBtnConfirm: 'Confirm', txtBtnCancel: 'Cancel' }); this.cmpModalRemove.initialize(); }); //---------------------------------------------------------------------------------------------------------------------- // COMPONENT SCRIPT //---------------------------------------------------------------------------------------------------------------------- /** * Script processing data for confirmation dialog. * Used libraries: JQuery 3> and Bootstrap 3>. * * @param name unique component name at page scope * @param callback function which processing confirm click * @param actionBtnId button for open modal dialog * @param text localization data, structure: * > txtModalHeader - text at header of modal dialog * > txtModalBody - text at body of modal dialog * > txtBtnConfirm - text at button for confirm action * > txtBtnCancel - text at button for cancel action * * @constructor * @author Aleksey Nikitenko */ function ModalConfirmationComponent(name, callback, actionBtnId, text) { this.name = name; this.callback = callback; // Text data this.txtModalHeader = text.txtModalHeader; this.txtModalBody = text.txtModalBody; this.txtBtnConfirm = text.txtBtnConfirm; this.txtBtnCancel = text.txtBtnCancel; // Elements this.elmActionBtn = $('#' + actionBtnId); this.elmModalDiv = undefined; this.elmConfirmBtn = undefined; } /** * Initialize needed data for current component object. * Generate html code and assign actions for needed UI * elements. */ ModalConfirmationComponent.prototype.initialize = function () { // Generate modal html and assign with action button $('body').append(this.getHtmlModal()); this.elmActionBtn.attr('data-toggle', 'modal'); this.elmActionBtn.attr('data-target', '#'+this.getModalDivId()); // Initialize needed elements this.elmModalDiv = $('#'+this.getModalDivId()); this.elmConfirmBtn = $('#'+this.getConfirmBtnId()); // Assign click function for confirm button var object = this; this.elmConfirmBtn.click(function() { object.elmModalDiv.modal('toggle'); // hide modal object.callback(); // run callback function }); }; //---------------------------------------------------------------------------------------------------------------------- // HTML GENERATORS //---------------------------------------------------------------------------------------------------------------------- /** * Methods needed for get html code of modal div. * * @returns {string} html code */ ModalConfirmationComponent.prototype.getHtmlModal = function () { var result = '
'; }; //---------------------------------------------------------------------------------------------------------------------- // UTILITY //---------------------------------------------------------------------------------------------------------------------- /** * Get id element with name prefix for this component. * * @returns {string} element id */ ModalConfirmationComponent.prototype.getModalDivId = function () { return this.name + '-modal-id'; }; /** * Get id element with name prefix for this component. * * @returns {string} element id */ ModalConfirmationComponent.prototype.getConfirmBtnId = function () { return this.name + '-confirm-btn-id'; };

Когда он подходит к крупномасштабному проекту, нам может понадобиться что то повторно используемое . Это то, с чем я пришел с помощью SO.

confirmDelete.jsp

   

  

reusingPage.jsp

    < %@ include file="../some/path/confirmDelete.jsp" %> 

Примечание. Для этого используется метод удаления http, вы можете изменить его из javascript или отправить его с использованием атрибута data, как в заголовке данных или URL-адресе данных, для поддержки любого запроса.

Если вы хотите сделать это в самом простом ярлыке, тогда вы можете сделать это с помощью этого плагина .


Но этот плагин является альтернативной реализацией с использованием Bootstrap Modal . И реальная реализация Bootstrap также очень проста, поэтому я не люблю использовать этот плагин, потому что он добавляет избыточное содержимое JS на странице, что замедлит время загрузки страницы.


идея

Мне нравится это делать самостоятельно,

  1. Если пользователь нажмет на кнопку, чтобы удалить элемент из списка, тогда вызов JS поместит Item ID (или любые более важные данные) в форму в модальном режиме.
  2. Затем во всплывающем окне появится подтверждение для двух кнопок.

    • Да отправит форму (с помощью ajax или прямой формы)
    • Нет , просто не будет отклонено модальное

Код будет таким (используя Bootstrap ) –

     

This is a item to delete.

POST рецепт с навигацией на целевую страницу и многоразовый файл Blade

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

Используя Blade я создал файловые resources/views/includes/confirmation_modal.blade.php :

   

Теперь, используя это прямолинейно:

 Remove 

Здесь не так много изменений, и модальный может быть включен следующим образом:

 @include('includes.confirmation_modal', ['headerText' => 'Delete Data?', 'bodyText' => 'Do you really want to delete these data? This operation is irreversible.', 'confirmButtonText' => 'Remove Data', 'verb' => 'DELETE']) 

Просто помещая там глагол, он использует его. Таким образом, CSRF также используется.

Помог мне, может быть, это помогает кому-то другому.

  • Колонка заказа в Bootstrap 4
  • Жидкость или система с фиксированной сеткой, в гибком дизайне, основанная на Twitter Bootstrap
  • Изменить twitter bootstrap navbar
  • Система загрузочной сетки Bootstrap с разной высотой
  • Измените порядок col - * - 12 столбцов в Bootstrap, используя push / pull
  • Bootstrap 3 Свернуть
  • Многостраничное раскрывающееся меню Twitter Bootstrap
  • Как построить компоновку с 2 колонками (фиксированная - жидкость) с помощью бутстрапа Twitter?
  • Отсутствует видимое - ** и скрыто - ** в Bootstrap v4
  • Центрировать элемент в Bootstrap 4 Navbar
  • Как получить заголовок с карточек или похожих предметов с одинаковой высотой с помощью гибкой коробки?
  • Interesting Posts

    Как преобразовать double в строку в C ++?

    Windows 7 – гаджеты исчезли

    Internet Explorer исчез из моего меню «Пуск» в Windows XP

    Проблема при использовании пользовательского шрифта – «родной шрифт не может быть создан»

    Firefox скрывает все, кроме области содержимого браузера

    Как передать распределяемые массивы подпрограмм в Fortran

    Поведение rsync с файлом, который все еще записывается?

    Настроить сетевое местоположение на «Рабочую сеть» в Windows 7 Home edition

    scanf Пропуск

    Поиск в Google «перейти к результатам»

    Преобразование Mat в массив / вектор в OpenCV

    Как получить активные пользовательские UserDetails

    Проходные события мыши для родительского контроля

    Могу ли я создать пользователя SSH, который может получить доступ только к определенному каталогу?

    Как найти исходный процесс неизвестного всплывающего окна в Windows 7

    Давайте будем гением компьютера.