首页 文章

Bootbox确认对话框问题

提问于
浏览
13

不幸的是,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”时删除对象的帖子 . 问候 .

3 回答

  • 6

    您可以在本页的"Basic Usage"下的"Confirm"链接上查看来源:http://bootboxjs.com/

    这是一个片段:

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

    假设UI中提供了jQuery,您可以避免在锚标记中使用 onClick 属性 . 只是我的两分钱 .

  • 0

    我也需要它,但我改变了一些东西......看看......

    将此函数添加到您的全局“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- *属性”,如下所示:

    <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

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

相关问题