Javascript 如何使用Bootstrap3弹出窗口和jQuery确认表单提交

我有一个列表中的项目行，每个项目都有自己的删除按钮。在删除该项之前，我想使用Bootstrap的弹出窗口在表单实际提交之前显示确认信息：

我过去经常使用，但我相信有一种更简单、更干净的方法，不用插件就能做到这一点

我可以将表单中的值传递给jQuery，并触发popover，但我不确定如何根据popover中选择的响应提交表单。此外，每当触发另一个删除按钮时，最好禁用任何其他打开的弹出窗口。我认识到这基本上是一个Javascript/jQuery问题，我非常感谢任何帮助或建议

以下是我迄今为止取得的进展：

---

谢谢

花了一点时间，因为popover被附加到

body

上，所以可能存在多个，与打开它们的按钮没有直接关系

如果不将容器设置为

body

，它们将被插入到每个表单中，这有助于隔离popover实例

有一个事件

显示.bs.popover

，该事件在绑定popover的选择器上触发。使用该事件可以隔离表单中的所有内容

var popOpts={
  placement: 'right',
  title: 'Delete Item',
  html: 'true',
  content: 'Are you sure you want to delete this item?<br><button class="btn btn-default popover-submit" type="button">Yes</button><button class="btn btn-default" type="button">No</button>',
  //container: 'body'
}


// Delete button popover confirmation
$(".btn-delete").popover(popOpts).on('shown.bs.popover', function(e) {
  var $delete=$(this)
  var $form=$delete.closest('form')
  var $pop=$form.find('.popover');
  var $popButtons=$pop.find('button').click(function(){
    if($(this).is('.popover-submit')){
      $form.submit();
    }
    $delete.popover('destroy').popover(popOpts);        

  }); 

});

var-popOpts={
位置：'对'，
标题：“删除项目”，
html:'真'，
内容：“是否确实要删除此项目？
是否”，
//容器：“主体”
}
//删除按钮弹出确认
$（“.btn delete”）.popover（popOpts）.on（'show.bs.popover'，函数（e）{
var$delete=$（此）
var$form=$delete.closest（'form'）
var$pop=$form.find（'.popover'）；
var$popButtons=$pop.find（'button'）。单击（函数（）{
如果（$（this）.is（'.popover submit'））{
$form.submit（）；
}
$delete.popover（'destroy'）.popover（popOpts）；
}); 
});

我发现一个bug试图使用

popover（'hide'）

，它导致另一个popover重叠，但不可见，并且按钮无法工作。解决方法是销毁并重新创建popover，以便每次都将其从DOM中删除

注意：请参见添加的popover类

Yes

按钮

我最终使用了的jQuery插件，它利用了Bootstrap的popover功能。我对主要组件jquery.popconfirm.js进行了一些小的编辑（例如将按钮更改为英语而不是默认的法语）。这很好，因为它可以自动处理表单提交或链接单击。我希望它能做的唯一一件事是在触发

.popConfirm（）

时关闭任何其他打开的弹出窗口。但是，我相信这很容易解决

用法非常简单。要解决上述问题，请使用以下示例确认使用引导弹出窗口提交表单：

HTML:

---

*使用jQuery 1.10.2和2.0.3、Bootstrap 3.0.3以及1/2/14*上的PopConfirm插件，所有这些都可以正常工作*

非常感谢您的回复。这让我更接近了！我认为在这一点上最大的挑战是：1）如果切换另一个，如何关闭已经打开的popover。在演示中，可以同时打开所有三个，这不是所需的行为。2） 在本例中，如何从原始表单中捕获值？再次感谢！我认为你已经很好地解决了这个问题，就像@AnaelFavre已经用PopConfirm插件解决了这个问题一样。看看我的答案。再次感谢，@charlietfl！

<form action="yourDeleteScript.php" method="post">
<input type="hidden" name="id" value="100">
<button class="btn btn-default btn-delete" type="submit">Delete</button>
</form>

<script type="text/javascript" src="jquery.popconfirm.js"></script>

$(".btn-delete").popConfirm({
    title: "Delete Item",
    content: "Are you sure you want to delete this item?",
    placement: "top"
});