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

Question

我有一些项目在列表中，每个项目都有自己的删除按钮。在删除项目之前，我想使用Bootstrap的弹出框来显示确认消息，以确保表单被正确提交：

我曾经使用Fast Confirm jQuery plugin来实现这个功能，但我相信有一种更简单、更清晰的方法可以在不使用插件的情况下完成。

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

这里是一个展示我的进展的Bootply: http://www.bootply.com/103376 谢谢！

- bhall

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

*这一切都是使用jQuery 1.10.2和2.0.3、Bootstrap 3.0.3以及PopConfirm插件在1/2/14上运行的*

- bhall

Answer 2

需要一些时间来理解，因为弹出框被附加到 body 上，所以可能存在多个弹出框，与打开它们的按钮没有直接关系。

如果你不将容器设置为 body，它们将被插入到每个表单中，这有助于隔离弹出框的实例。

有一个事件 shown.bs.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);        

  }); 

});

我尝试使用popover('hide')时发现一个错误，它导致另一个弹出框重叠，但不可见，并且按钮无法使用。解决方法是每次销毁并重新创建弹出框，以便将其从DOM中移除。

注意：请查看弹出框的添加类Yes按钮

演示

- charlietfl

---

非常感谢您的回复。这让我更接近目标了！我认为目前最大的挑战是：1）如何在切换另一个弹出窗口时关闭已经打开的弹出窗口。在演示中，可以同时打开所有三个弹出窗口，这不是期望的行为。2）在这个例子中，如何捕获原始表单中的值？再次感谢！ - bhall

我认为你在解决这个问题的过程中已经走了很远，就像@AnaelFavre使用PopConfirm插件一样。请查看我的答案。再次感谢，@charlietfl！ - bhall