Подтвердите удаление в модальном / диалоговом окне с помощью Twitter Bootstrap?

285

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

Есть ли способ сделать это с помощью модального диалога Twitter Bootstrap?

jquery twitter-bootstrap SWL
источник

4

jsfiddle.net/MjmVr/363

Джони Джонс

3

Перейдя к этому вопросу, я хотел присоединиться (как мне кажется) к такому простому и более упорядоченному «решению» этой проблемы. Некоторое время я боролся с этим, а затем понял, насколько это просто: просто поместите фактическую кнопку отправки формы в модальное диалоговое окно, а затем кнопка отправки на самой форме ничего не делает, кроме как запускает диалоговое окно ... проблема решена.

Майкл Доулман

@jonijones этот пример не работает для меня (сообщение о подтверждении не отображается при нажатии первой кнопки) - протестировано в chrome

egmfrs

397

ПОЛУЧИТЬ рецепт

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

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

<a href="#" data-href="delete.php?id=23" data-toggle="modal" data-target="#confirm-delete">Delete record #23</a>

<button class="btn btn-default" data-href="/delete.php?id=54" data-toggle="modal" data-target="#confirm-delete">
    Delete record #54
</button>

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

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ...
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok">Delete</a>
            </div>
        </div>
    </div>
</div>

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

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

Таким образом, на 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;
}

<script data-require="jquery@*" data-semver="2.0.3" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
      </div>
      <div class="modal-body">
        <p>You are about to delete <b><i class="title"></i></b> record, this procedure is irreversible.</p>
        <p>Do you want to proceed?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger btn-ok">Delete</button>
      </div>
    </div>
  </div>
</div>
<a href="#" data-record-id="23" data-record-title="The first one" data-toggle="modal" data-target="#confirm-delete">
        Delete "The first one", #23
    </a>
<br />
<button class="btn btn-default" data-record-id="54" data-record-title="Something cool" data-toggle="modal" data-target="#confirm-delete">
  Delete "Something cool", #54
</button>

Развернуть фрагмент

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

Bootstrap 2.3

Вот оригинальная версия кода, который я сделал, когда отвечал на этот вопрос для Bootstrap 2.3 modal.

$('#modal').on('show', function() {
    var id = $(this).data('id'),
        removeBtn = $(this).find('.danger');
    removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)ref=\d*/, '$1ref=' + id));
});

Демо : http://jsfiddle.net/MjmVr/1595/

dfsq
источник

1

Это работает почти идеально, но даже в скриптовой версии (как на моем сайте) идентификатор не передается кнопке Да в модальном режиме. Я заметил, что вы пытаетесь заменить & ref вместо ? Ref, поэтому я попытался изменить это, но он все еще не работает. Я что-то здесь упускаю? В остальном это здорово, так что TIA за вашу помощь!

SWL

Спасибо @dfsq - это работало прекрасно. Диалог не скрывается при нажатии кнопки «нет», поэтому я изменил href на #, а не на модальное скрытие, и это тоже работает. В очередной раз благодарим за помощь.

SWL

22

Один твик заключается в том, что последний запрос на удаление должен привести к публикации, а не к GEt, как со ссылкой. Если вы разрешите удаление в GET, то злонамеренные третьи стороны могут легко создавать ссылки на сайты или электронные письма, которые заставляют вашего пользователя невольно удалять вещи. Это может показаться глупым, но есть сценарии, когда это будет серьезной проблемой безопасности.

AaronLS

2

Возможно, вы захотите взглянуть на Vex . Намного проще сделать то, что вы просите: jsfiddle.net/adamschwartz/hQump .

Адам

3

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

NickG

158

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

Простейший возможный пример:

bootbox.alert("Hello world!");

С сайта:

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

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

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

$(function() {
  bootbox.alert("Hello world!");
});

<!-- required includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<!-- bootbox.js at 4.4.0 -->
<script src="https://rawgit.com/makeusabrew/bootbox/f3a04a57877cab071738de558581fbc91812dce9/bootbox.js"></script>

Развернуть фрагмент

Рифат
источник

2

К сожалению, в тот момент, когда вам нужен неанглийский текст в заголовке и кнопках, вы должны либо изменить JS, либо начать параметризацию почти так же, как просто добавив загрузочный html и JS самостоятельно. :)

Johncl

31

  // ---------------------------------------------------------- Generic Confirm  

  function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) {

    var confirmModal = 
      $('<div class="modal hide fade">' +    
          '<div class="modal-header">' +
            '<a class="close" data-dismiss="modal" >&times;</a>' +
            '<h3>' + heading +'</h3>' +
          '</div>' +

          '<div class="modal-body">' +
            '<p>' + question + '</p>' +
          '</div>' +

          '<div class="modal-footer">' +
            '<a href="#" class="btn" data-dismiss="modal">' + 
              cancelButtonTxt + 
            '</a>' +
            '<a href="#" id="okButton" class="btn btn-primary">' + 
              okButtonTxt + 
            '</a>' +
          '</div>' +
        '</div>');

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

  });

jousby
источник

1

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

Саурабх

28

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

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('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
        } 
        $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
        $('#dataConfirmOK').attr('href', href);
        $('#dataConfirmModal').modal({show:true});
        return false;
    });
});

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

<a href="/any/url/delete.php?ref=ID" data-confirm="Are you sure you want to delete?">Delete</a>

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

Арьян
источник

4

Пожалуйста, не публикуйте код из других источников без указания авторства: petefreitag.com/item/809.cfm .

А. Вебб

4

Несмотря на то, что опера сначала забыла об атрибуции, для меня это было идеально. Работает как шарм.

Янис Пейзениекс,

3

Я думаю, что это не очень хорошая идея удалять элементы с помощью запроса GET http

Miguel Prz

7

Мама сказала, чтобы я не нажимал ссылки на холодный синтез

Майк Пурселл

3

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

Бретт

17

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

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

/* Generic Confirm func */
  function confirm(heading, question, cancelButtonTxt, okButtonTxt, callback) {

    var confirmModal = 
      $('<div class="modal fade">' +        
          '<div class="modal-dialog">' +
          '<div class="modal-content">' +
          '<div class="modal-header">' +
            '<a class="close" data-dismiss="modal" >&times;</a>' +
            '<h3>' + heading +'</h3>' +
          '</div>' +

          '<div class="modal-body">' +
            '<p>' + question + '</p>' +
          '</div>' +

          '<div class="modal-footer">' +
            '<a href="#!" class="btn" data-dismiss="modal">' + 
              cancelButtonTxt + 
            '</a>' +
            '<a href="#!" id="okButton" class="btn btn-primary">' + 
              okButtonTxt + 
            '</a>' +
          '</div>' +
          '</div>' +
          '</div>' +
        '</div>');

    confirmModal.find('#okButton').click(function(event) {
      callback();
      confirmModal.modal('hide');
    }); 

    confirmModal.modal('show');    
  };  
/* END Generic Confirm func */

nemesisfixx
источник

3

Отличное решение здесь. Я сделал несколько небольших изменений для обработки обратного вызова для ссылки отмены. Одна маленькая рекомендация использовать #! вместо # в вашем href, чтобы предотвратить прокрутку страницы вверх.

Доменик Д.

Если бы я мог удвоить это голосование, я бы. Красиво и элегантно Спасибо.

Найджел Джонсон

Очень хорошее решение. Еще одно улучшение, которое я могу предложить, - добавить еще один аргумент, btnType = "btn-primary"а затем изменить код для кнопки «ОК» class="btn ' + btnType + '". Таким образом, можно передать необязательный аргумент, чтобы изменить внешний вид кнопки ОК, например, btn-dangerдля удаления.

IamNaN

Спасибо. Мне пришлось поменять местами теги <h3> и <a> (сначала h3), чтобы это правильно отображалось.

Дейв Докинз

10

Я нашел это полезным и простым в использовании, плюс он выглядит довольно: 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: '<i class="icon-trash icon-white"></i> Delete',
    confirmCallback: function (target) {
         //perform the deletion here, or leave this option
         //out to just follow link..
    }
});

Марк Родос
источник

Это хорошая работа

loretoparisi

4

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

karim_fci
источник

2

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

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

digimango.messagebox.js :

const dialogTemplate = '\
    <div class ="modal" id="digimango_messageBox" role="dialog">\
        <div class ="modal-dialog">\
            <div class ="modal-content">\
                <div class ="modal-body">\
                    <p class ="text-success" id="digimango_messageBoxMessage">Some text in the modal.</p>\
                    <p><textarea id="digimango_messageBoxTextArea" cols="70" rows="5"></textarea></p>\
                </div>\
                <div class ="modal-footer">\
                    <button type="button" class ="btn btn-primary" id="digimango_messageBoxOkButton">OK</button>\
                    <button type="button" class ="btn btn-default" data-dismiss="modal" id="digimango_messageBoxCancelButton">Cancel</button>\
                </div>\
            </div>\
        </div>\
    </div>';


// 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');
}

Развернуть фрагмент

Чтобы использовать digimango.messagebox.js :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>A useful generic message box</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="~/Content/bootstrap.min.css" media="screen" />
    <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.js" type="text/javascript"></script>
    <script src="~/Scripts/bootbox.js" type="text/javascript"></script>

    <script src="~/Scripts/digimango.messagebox.js" type="text/javascript"></script>


    <script type="text/javascript">
        function testAlert() {
            messageBox('Something went wrong!', 'error');
        }

        function testAlertWithCallback() {
            messageBox('Something went wrong!', 'error', null, function () {
                messageBox('OK clicked.');
            });
        }

        function testConfirm() {
            messageBox('Do you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' }, function () {
                messageBox('Are you sure you want to proceed?', 'warning', { okButtonName: 'Yes', cancelButtonName: 'No' });
            });
        }

        function testPrompt() {
            messageBox('How do you feel now?', 'normal', { showTextBox: true }, function (userInput) {
                messageBox('User entered "' + userInput + '".');
            });
        }

        function testPromptWithDefault() {
            messageBox('How do you feel now?', 'normal', { showTextBox: true, textBoxDefaultText: 'I am good!' }, function (userInput) {
                messageBox('User entered "' + userInput + '".');
            });
        }

    </script>
</head>

<body>
    <a href="#" onclick="testAlert();">Test alert</a> <br/>
    <a href="#" onclick="testAlertWithCallback();">Test alert with callback</a> <br />
    <a href="#" onclick="testConfirm();">Test confirm</a> <br/>
    <a href="#" onclick="testPrompt();">Test prompt</a><br />
    <a href="#" onclick="testPromptWithDefault();">Test prompt with default text</a> <br />
</body>

</html>

Развернуть фрагмент

Глупый чувак
источник

1

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

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

HTML-код для теста:

...
<body>
    <a href='#' id="remove-btn-a-id" class="btn btn-default">Test Remove Action</a>
</body>
...

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 = '<div class="modal fade" id="' + this.getModalDivId() + '"';
    result +=' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
    result += '<div class="modal-dialog"><div class="modal-content"><div class="modal-header">';
    result += this.txtModalHeader + '</div><div class="modal-body">' + this.txtModalBody + '</div>';
    result += '<div class="modal-footer">';
    result += '<button type="button" class="btn btn-default" data-dismiss="modal">';
    result += this.txtBtnCancel + '</button>';
    result += '<button id="'+this.getConfirmBtnId()+'" type="button" class="btn btn-danger">';
    result += this.txtBtnConfirm + '</button>';
    return result+'</div></div></div></div>';
};

//----------------------------------------------------------------------------------------------------------------------
// 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';
};

Алексей Никитенко
источник

0

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

confirmDelete.jsp

<!-- Modal Dialog -->
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel"
 aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">&times;</button>
            <h4 class="modal-title">Delete Parmanently</h4>
        </div>
        <div class="modal-body" style="height: 75px">
            <p>Are you sure about this ?</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-danger" id="confirm-delete-ok">Ok
            </button>
        </div>
    </div>
</div>

<script type="text/javascript">

    var url_for_deletion = "#";
    var success_redirect = window.location.href;

$('#confirmDelete').on('show.bs.modal', function (e) {
    var message = $(e.relatedTarget).attr('data-message');
    $(this).find('.modal-body p').text(message);
    var title = $(e.relatedTarget).attr('data-title');
    $(this).find('.modal-title').text(title);

    if (typeof  $(e.relatedTarget).attr('data-url') != 'undefined') {
        url_for_deletion = $(e.relatedTarget).attr('data-url');
    }
    if (typeof  $(e.relatedTarget).attr('data-success-url') != 'undefined') {
        success_redirect = $(e.relatedTarget).attr('data-success-url');
    }

});

<!-- Form confirm (yes/ok) handler, submits form -->
$('#confirmDelete').find('.modal-footer #confirm-delete-ok').on('click', function () {
    $.ajax({
        method: "delete",
        url: url_for_deletion,
    }).success(function (data) {
        window.location.href = success_redirect;
    }).fail(function (error) {
        console.log(error);
    });
    $('#confirmDelete').modal('hide');
    return false;
});
<script/>

reusingPage.jsp

<a href="#" class="table-link danger"
data-toggle="modal"
data-target="#confirmDelete"
data-title="Delete Something"
data-message="Are you sure you want to inactivate this something?"
data-url="client/32"
id="delete-client-32">
</a>
<!-- jQuery should come before this -->
<%@ include file="../some/path/confirmDelete.jsp" %>

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

Малеен Абевардана
источник

0

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

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

идея

Я хотел бы реализовать это сам таким образом-

Если пользователь нажимает s на кнопке, чтобы удалить элемент из списка, то вызов JS поместит идентификатор элемента (или любые более важные данные) в форму в модальном режиме.
Затем во всплывающем окне появятся 2 кнопки для подтверждения.
- Да отправит форму (с ajax или прямой формой отправки)
- Нет просто уволит модал

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

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
$(document).ready(function()
{
    $("button").click(function()
    {
        //Say - $('p').get(0).id - this delete item id
        $("#delete_item_id").val( $('p').get(0).id );
        $('#delete_confirmation_modal').modal('show');
    });
});
</script>

<p id="1">This is a item to delete.</p>

<button type="button" class="btn btn-danger">Delete</button>

<!-- Delete Modal content-->

<div class="modal fade" id="delete_confirmation_modal" role="dialog" style="display: none;">
	<div class="modal-dialog" style="margin-top: 260.5px;">
				<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">×</button>
				<h4 class="modal-title">Do you really want to delete this Category?</h4>
			</div>
			<form role="form" method="post" action="category_delete" id="delete_data">
				<input type="hidden" id="delete_item_id" name="id" value="12">
				<div class="modal-footer">
					<button type="submit" class="btn btn-danger">Yes</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
				</div>
			</form>
		</div>

	</div>
</div>

Развернуть фрагмент

Вы должны изменить форму действия в соответствии с вашими требованиями.

Удачного кодирования :)

Абрар Джахин
источник

0

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

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

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

<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="confirmation-modal-label" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>{{ $headerText }}</h4>
            </div>
            <div class="modal-body">
                {{ $bodyText }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <form action="" method="POST" style="display:inline">
                    {{ method_field($verb) }}
                    {{ csrf_field() }}
                    <input type="submit" class="btn btn-danger btn-ok" value="{{ $confirmButtonText }}" />
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $('#confirmation-modal').on('show.bs.modal', function(e) {
        href = $(e.relatedTarget).data('href');

        // change href of button to corresponding target
        $(this).find('form').attr('action', href);
    });
</script>

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

<a data-href="{{ route('data.destroy', ['id' => $data->id]) }}" data-toggle="modal" data-target="#confirmation-modal" class="btn btn-sm btn-danger">Remove</a>

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

@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 также используется.

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

Ледяной огонь
источник

Подтвердите удаление в модальном / диалоговом окне с помощью Twitter Bootstrap?

Ответы:

ПОЛУЧИТЬ рецепт

POST рецепт

Bootstrap 2.3

confirmDelete.jsp

reusingPage.jsp

идея

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