Bootbox确认对话框问题

不幸的是，doc Bootbox（ http://paynedigital.com/2011/11/bootbox-js-alert-confirm-dialogs-for-twitter-bootstrap ）没有教导如何调用确认对话框。 由于在加载页面时始终显示文档窗口，因此在单击删除按钮调用时应出现错误。 这是尝试失败的代码。

// show "false" does not work, the confirm window is showing when page is loaded. $(function () { bootbox.confirm("Confirm delete?", "No", "Yes", function(result) { show: false }); }); // need show the confirm window when the user click in a button, how to call the confirm window?  

如何仅在单击删除按钮时才设置此引导框？ 谢谢！

编辑 – 解决方案：

 $(function () { $("a#confirm").click(function(e) { e.preventDefault(); var location = $(this).attr('href'); bootbox.confirm("Confirm exclusion?", "No", "Yes", function(confirmed) { if(confirmed) { window.location.replace(location); } }); }); }); 

现在，当我点击“是”时删除工作。 我要求插件的开发人员将完整的示例放在doc中，这样用户就不需要创建有关如何在单击“yes”时删除对象的post。 问候。

Answer 1

您可以在本页“基本用法”下的“确认”链接中查看来源： http ： //bootboxjs.com/

这是一个片段：

 $("a.confirm").click(function(e) { e.preventDefault(); bootbox.confirm("Are you sure?", function(confirmed) { console.log("Confirmed: "+confirmed); }); }); 

假设您正在使用的UI中提供了jQuery，我将避免在锚标记中使用onClick属性。 只是我的两分钱。

Answer 2

我也需要它，但我改变了一些东西……看看……

将此函数添加到您的全局“jQuery Ready”函数中，如下所示：

 $(document).on("click", "[data-toggle=\"confirm\"]", function (e) { e.preventDefault(); var lHref = $(this).attr('href'); var lText = this.attributes.getNamedItem("data-title") ? this.attributes.getNamedItem("data-title").value : "Are you sure?"; // If data-title is not set use default text bootbox.confirm(lText, function (confirmed) { if (confirmed) { //window.location.replace(lHref); // similar behavior as an HTTP redirect (DOESN'T increment browser history) window.location.href = lHref; // similar behavior as clicking on a link (Increments browser history) } }); }); 

只需在按钮或链接中添加一些“data- *属性”，如下所示：

所以……这样你就可以得到一个个性化的问题..这对你的用户来说更加直观……

你喜欢吗？！

见demo： jsfiddle

Answer 3

 $(document).on("click", ".confirm-modal", function(e) { e.preventDefault(); bootbox.confirm("Are You sure?", function(result) { if(result) { top.location.href = e.target.href; } }); });