不幸的是,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?
<td><a class="icon-trash" onclick="bootbox.confirm();" href="{% url 'del_setor' setor.id %}" title="Delete"></a></td>
如何仅在单击删除按钮时才设置此引导框? 谢谢!
编辑 - 解决方案:
$(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”时删除对象的帖子。 问候。
答案 0 :(得分:6)
您可以在本页“基本使用”下的“确认”链接中查看来源:http://bootboxjs.com/
这是一个片段:
$("a.confirm").click(function(e) {
e.preventDefault();
bootbox.confirm("Are you sure?", function(confirmed) {
console.log("Confirmed: "+confirmed);
});
});
假设您正在使用的UI中提供了jQuery,我将避免在您的锚标记中使用onClick
属性。只是我的两分钱。
答案 1 :(得分:3)
我也需要它,但我改变了一些东西......看看......
将此功能添加到您的全球&#34; jQuery Ready&#34;这样的功能:
$(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)
}
});
});
只需添加一些&#34; data- *属性&#34;到您的按钮或链接:
<a class="btn btn-xs btn-default" data-toggle="confirm" data-title="Do you really want to delete the record 123?" href="/Controller/Delete/123"><span class="fa fa-remove"></span> </a>
所以......这样你就可以得到一个个性化的问题..这对你的用户来说更直观......
你喜欢吗?!
请参阅演示:jsfiddle
答案 2 :(得分:0)
$(document).on("click", ".confirm-modal", function(e) {
e.preventDefault();
bootbox.confirm("Are You sure?", function(result) {
if(result) {
top.location.href = e.target.href;
}
});
});
答案 3 :(得分:0)
网格链接按钮的Aspx面:
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="DELETE"
OnClientClick="javascript:return DeleteConfirm(this,'Are you Sure?');" CausesValidation="False" Text="Delete" > Delete
</asp:LinkButton>
function DeleteConfirm(btn, msg)
{
if(msg==''){msg='Are You Sure ? ';}
if ($(btn).attr('confirmOK')=='1'){return true;}
bootbox.confirm({
title: 'Confirm Popup',
message: msg,
callback: function(result) {
if (result)
{
$(btn).attr('confirmOK', '1');
btn.click();
}
else{
$(btn).attr('confirmOK', '0');
}
}
});
return false;
};