logo标签列表

使用 Twitter Bootstrap 如何在模态框中确认删除操作？

jquerytwitter-bootstrap
311

我有一张与数据库行关联的HTML表格。我想为每一行添加一个“删除行”链接，但是我希望在此之前先与用户确认。

是否可以使用Twitter Bootstrap模态框来实现这个功能？

5
http://jsfiddle.net/MjmVr/363/ - joni jones
3
看到这个问题，我想提出一个（在我看来）非常简单和更加直观的“修复”方法。我曾经苦于这个问题一段时间，然后意识到它可以如此简单：只需将实际的表单提交按钮放在模态对话框中，然后表单本身上的提交按钮什么也不做，只会触发对话框窗口……问题解决了。 - Michael Doleman
@jonijones 这个例子对我不起作用（第一个按钮点击后没有显示确认消息）- 在Chrome中测试过。 - egmfrs
13个回答
428

获取食谱

对于这个任务，您可以使用已经可用的插件和Bootstrap扩展程序。或者您可以使用只有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指向您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>

现在，您只需要这个小 JavaScript 来使删除操作可确认：

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

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

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

发布菜谱

我意识到在某些情况下需要执行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>

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

Bootstrap 2.3

这里是我回答 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*/, '$1ref=' + id));
});

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

1
这个几乎完美地工作，但即使在 fiddle 版本中（就像在我的网站上），id 也没有传递到模态框中的 Yes 按钮。我注意到你试图替换 &ref 而不是 ?ref，所以我尝试更改了它，但仍然无法工作。我还错过了其他东西吗？否则这很棒，谢谢您的帮助！ - SWL
24
一处修改是最终的删除请求应该生成一个“post”，而不是像链接一样的“GET”。如果允许在“GET”请求中进行删除操作，那么恶意第三方可以轻易地在网站或电子邮件上制作链接，使您的用户不知不觉中删除内容。这可能看起来很傻，但在某些情况下，这会成为严重的安全问题。 - AaronLS
3
你可能想看一下Vex。使用它可以更简单地完成你所要求的操作：http://jsfiddle.net/adamschwartz/hQump。 - Adam
4
因为使用GET方法执行破坏性操作而降低评分的诱惑是不合适的。你永远不能这样做，有许多不同的原因。 - NickG
多年后来到这个答案，至少在Bootstrap 5中，数据属性现在在它们中间有“-bs”，即data-bs-toggle，data-bs-target，data-bs-dismiss等。 - undefined
显示剩余12条评论
165

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>

4
很遗憾，当你需要在标题和按钮上使用非英文文本时，你要么必须修改JS，要么必须像添加Bootstrap 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);

  });
1
这是一篇旧帖子，但我想做同样的事情，但当我使用以上代码时，模态对话框没有显示？ - Saurabh
30

我知道这是一个非常老的问题，但是今天我想寻找一种更有效的处理Bootstrap模态框的方法。经过一些研究，我发现了比上面展示的解决方案更好的东西，可以在这个链接中找到：

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
请勿未经归属地发布其他来源的代码：http://www.petefreitag.com/item/809.cfm。 - A. Webb
4
虽然最初作者忘记了归属，但这对我来说是完美的。非常好用。 - Janis Peisenieks
3
我认为使用GET HTTP请求删除项目不是一个好主意。 - Miguel Prz
9
妈妈告诉我不要点击任何冷聚变的链接。 - Mike Purcell
3
@BenY：这不是关于用户是否有权限做某些事情的问题，而是关于那些已经有权限做事情的恶意用户被诱骗点击其他网站、电子邮件等链接，以便恶意用户可以利用该用户的权限。 - Brett
显示剩余3条评论
18

感谢@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 */
3
这里有一个很好的解决方案。我稍作修改以处理取消链接的回调。一个小建议是使用#!而不是#在你的href中，以防止页面滚动到顶部。 - Domenic D.
如果我可以双倍点赞，我一定会这样做。非常漂亮和优雅。谢谢。 - Nigel Johnson
非常好的解决方案。我可以建议另一个改进，即添加另一个参数：btnType =“btn-primary”，然后更改OK按钮的代码以包含class =“btn'+ btnType +'”。这样，您可以传递一个可选参数来更改OK按钮的外观，例如使用btn-danger进行删除。 - IamNaN
谢谢。我不得不交换<h3>和<a>标签（先是h3），以便正确呈现。 - Dave Dawkins
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库处理这种类型的任务。首先，您需要包含bootbox JS文件。然后，在您的事件处理程序函数中，只需编写以下代码：

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

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

    });

官方bootboxjs 网站

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>
enter image description here

1

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

dfsq 的回答非常好。我稍微修改了一下以适应我的需求：实际上，我需要一个模态框，以便在单击后，用户还可以导航到相应的页面。异步执行查询并不总是所需的。

使用 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 也被利用。

对我有帮助，或许对其他人也有帮助。

1
如果你想用最简单的方法来做到这一点，那么你可以使用 这个插件。
但是这个插件是使用Bootstrap Modal的替代实现。而真正的Bootstrap实现也非常简单，所以我不喜欢使用这个插件，因为它会在页面中添加过多的JS内容，这会减慢页面加载时间。

想法

我希望通过以下方式自己实现-

  1. 如果用户点击一个按钮以从列表中删除一个项目，则JS调用将在模态框中将项目ID（或任何更重要的数据）放入表单中。

  2. 然后，在弹出窗口中，将有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>

根据您的需求更改表单操作。

愉快编程 :)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接