jQuery 使用 Twitter Bootstrap 在模态/对话框中确认删除？

Question

提问by SWL

I have an HTML table of rows tied to database rows. I'd like to have a "delete row" link for each row, but I would like to confirm with the user beforehand.

我有一个与数据库行相关的行的 HTML 表。我想为每一行设置一个“删除行”链接，但我想事先与用户确认。

Is there any way to do this using the Twitter Bootstrap modal dialog?

有没有办法使用 Twitter Bootstrap 模态对话框来做到这一点？

Answer 1

回答by dfsq

GET recipe

获取食谱

For this task you can use already available plugins and bootstrap extensions. Or you can make your own confirmation popup with just 3lines of code. Check it out.

对于此任务，您可以使用已经可用的插件和引导程序扩展。或者，您只需3行代码即可制作自己的确认弹出窗口。一探究竟。

Say we have this links (note data-hrefinstead of href) or buttons that we want to have delete confirmation for:

假设我们有以下链接（注释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>

Here #confirm-deletepoints to a modal popup div in your HTML. It should have an "OK" button configured like this:

这里#confirm-delete指向 HTML 中的模态弹出 div。它应该有一个“确定”按钮，配置如下：

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

Now you only need this little javascript to make a delete action confirmable:

现在你只需要这个小 javascript 就可以确认删除操作：

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

So on show.bs.modalevent delete button hrefis set to URL with corresponding record id.

因此，show.bs.modal事件删除按钮href设置为具有相应记录 ID 的 URL。

Demo:http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview

演示：http : //plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p=preview

POST recipe

发布食谱

I realize that in some cases there might be needed to perform POST or DELETE request rather then GET. It it still pretty simple without too much code. Take a look at the demo below with this approach:

我意识到在某些情况下可能需要执行 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="[email protected]" 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>

Demo:http://plnkr.co/edit/V4GUuSueuuxiGr4L9LmG?p=preview

演示：http : //plnkr.co/edit/V4GUuSueuuxiGr4L9LmG?p=preview

Bootstrap 2.3

引导程序 2.3

Here is an original version of the code I made when I was answering this question for Bootstrap 2.3 modal.

这是我在回答 Bootstrap 2.3 模态问题时制作的代码的原始版本。

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

Demo: http://jsfiddle.net/MjmVr/1595/

演示：http: //jsfiddle.net/MjmVr/1595/

Answer 2

回答by Rifat

http://bootboxjs.com/- latest works with Bootstrap 3.0.0

http://bootboxjs.com/- Bootstrap 3.0.0 的最新作品

The simplest possible example:

最简单的例子：

bootbox.alert("Hello world!");

From the site:

从网站：

The library exposes three methods designed to mimic their native JavaScript equivalents. Their exact method signatures are flexible as each can take various parameters to customise labels and specify defaults, but they are most commonly called like so:

该库公开了三种旨在模仿其原生 JavaScript 等价物的方法。它们的确切方法签名很灵活，因为每个方法都可以采用各种参数来自定义标签和指定默认值，但它们最常见的调用方式如下：

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

Here's a snippet of it in action (click "Run code snippet" below):

这是它的一个片段（点击下面的“运行代码片段”）：

$(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>

Answer 3

回答by jousby

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

  });

Answer 4

回答by Arjan

I'd realise its a very old question, but since i wondered today for a more efficient method of handling the bootstrap modals. I did some research and found something better then the solutions which are shown above, that can be found at this link:

我意识到这是一个非常古老的问题，但是因为我今天想知道一种更有效的方法来处理引导模式。我做了一些研究，发现了比上面显示的解决方案更好的东西，可以在此链接中找到：

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

First load the jquery

首先加载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;
    });
});

Then just ask any question/confirmation to href:

然后只需向href提出任何问题/确认：

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

This way the confirmation modal is a lot more universal and so it can easily be re-used on other parts of your website.

通过这种方式，确认模式更加通用，因此可以轻松地在您网站的其他部分重复使用。

Answer 5

回答by nemesisfixx

Thanks to @Jousby's solution, I managed to get mine working as well, but found I had to improve his solution's Bootstrap modal markup a bit to make it render correctly as demonstrated in the official examples.

感谢@Jousby 的解决方案，我也设法让我的解决方案正常工作，但发现我必须稍微改进他的解决方案的 Bootstrap 模态标记，以使其正确呈现，如官方示例中所示。

So, here's my modified version of the generic confirmfunction that worked fine:

所以，这是我修改后的通用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 */

Answer 6

回答by Mark Rhodes

I found this useful and easy to use, plus it looks pretty: http://maxailloud.github.io/confirm-bootstrap/.

我发现这很有用且易于使用，而且看起来很漂亮：http: //maxailloud.github.io/confirm-bootstrap/。

To use it, include the .js file in your page then run:

要使用它，请在页面中包含 .js 文件，然后运行：

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

There are various options you can apply to it, to make it look better when doing it to confirm a delete, I use:

您可以对其应用各种选项，为了在确认删除时使其看起来更好，我使用：

$('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..
    }
});

Answer 7

回答by karim_fci

I can easily handle this type of task using bootbox.js library. At first you need to include bootbox JS file. Then in your event handler function simply write following code:

我可以使用 bootbox.js 库轻松处理此类任务。首先你需要包含 bootbox JS 文件。然后在您的事件处理函数中只需编写以下代码：

    bootbox.confirm("Are you sure to want to delete , function(result) {

    //here result will be true
    // delete process code goes here

    });

Offical bootboxjs site

官方 bootboxjs站点

Answer 8

回答by Silly Dude

Following solution is better than bootbox.js, because

以下解决方案比 bootbox.js 更好，因为

It can do everything bootbox.js can do;
The use syntax is simpler
It allows you to elegantly control the color of your message using "error", "warning" or "info"
Bootbox is 986 lines long, mine only 110 lines long

它可以做 bootbox.js 可以做的一切；
使用语法更简单
它允许您使用“错误”、“警告”或“信息”优雅地控制消息的颜色
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');
}

To use digimango.messagebox.js:

使用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>

Answer 9

回答by Alexey Nikitenko

You can try more reusable my solution with callbackfunction. In this function you can use POST request or some logic. Used libraries: JQuery 3>and Bootstrap 3>.

您可以使用回调函数尝试更可重用的我的解决方案。在这个函数中，你可以使用 POST 请求或一些逻辑。使用的库：JQuery 3>和Bootstrap 3>。

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

Html code for test:

用于测试的 HTML 代码：

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

Javascript:

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

Answer 10

回答by IceFire

POST Recipe with navigation to target page and reusable Blade file

带有导航到目标页面和可重复使用的 Blade 文件的 POST 食谱

dfsq's answer is very nice. I modified it a bit to fit my needs: I actually needed a modal for the case that, after clicking, the user would also be navigated to the corresponding page. Executing the query asynchronously is not always what one needs.

dfsq 的回答非常好。我对它进行了一些修改以适应我的需要：我实际上需要一个模式，用于在单击后用户也将导航到相应页面的情况。异步执行查询并不总是需要的。

Using BladeI created the file resources/views/includes/confirmation_modal.blade.php:

使用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>

Now, using it is straight-forward:

现在，使用它很简单：

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

Not much changed here and the modal can be included like this:

这里没有太大变化，可以像这样包含模态：

@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'])

Just by putting the verb in there, it uses it. This way, CSRF is also utilized.

只需将动词放在那里，它就会使用它。这样，CSRF 也被利用了。

Helped me, maybe it helps someone else.

帮助了我，也许它可以帮助别人。

jQuery 使用 Twitter Bootstrap 在模态/对话框中确认删除？

提问by SWL

回答by dfsq

GET recipe

获取食谱

POST recipe

发布食谱

Bootstrap 2.3

引导程序 2.3

回答by Rifat

回答by jousby

回答by Arjan

回答by nemesisfixx

回答by Mark Rhodes

回答by karim_fci

回答by Silly Dude

回答by Alexey Nikitenko

回答by IceFire

POST Recipe with navigation to target page and reusable Blade file

带有导航到目标页面和可重复使用的 Blade 文件的 POST 食谱

相关推荐

最近更新

标签

jQuery 使用 Twitter Bootstrap 在模态/对话框中确认删除？

提问by SWL

回答by dfsq

GET recipe

获取食谱

POST recipe

发布食谱

Bootstrap 2.3

引导程序 2.3

回答by Rifat

回答by jousby

回答by Arjan

回答by nemesisfixx

回答by Mark Rhodes

回答by karim_fci

回答by Silly Dude

回答by Alexey Nikitenko

回答by IceFire

POST Recipe with navigation to target page and reusable Blade file

带有导航到目标页面和可重复使用的 Blade 文件的 POST 食谱

相关推荐

jQuery “溢出-x：隐藏”仅一侧？

jQuery UI 在使用 .droppable 放入 div 时删除元素

jQuery 如果变量 = 数字，做 X，否则什么都不做

jquery mobile如何隐藏mobile safari的地址栏？

相关推荐

最近更新

标签