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

Question

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

​

​

我过去常常使用Fast Confirm jQuery plugin来做这件事，但我相信有一种更简单、更干净的方法可以不需要插件就能做到这一点。

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

这里有一个Bootply，它显示了我到目前为止的进展：http://www.bootply.com/103376

谢谢！！

Answer 1

我最终使用了AnaelFavre的PopConfirm jQuery插件，它利用了Bootstrap的弹出功能。我对主要组件jquery.popconfirm.js做了一些小的修改(比如将按钮改为英文，而不是默认的法语)。它很不错，因为它可以自动处理表单提交或链接点击。我唯一希望它能做的就是在.popConfirm()被触发时切换关闭任何其他打开的弹出窗口。但是，我相信这个问题很容易解决。

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

HTML：

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

JS：

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

*在1/2/14使用jQuery 1.10.2和2.0.3、Bootstrap 3.0.3和PopConfirm插件都能正常工作*