关于bootbox.js自定义弹出框样式,如修改宽度等

最新推荐文章于 2023-04-27 15:11:28 发布

htcyrylcmj0415

最新推荐文章于 2023-04-27 15:11:28 发布

阅读量3.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： bootbox

本文链接：https://blog.youkuaiyun.com/htcyrylcmj0415/article/details/80455160

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何修改bootbox.js源码以实现自定义弹窗宽度，并提供了一个具体的代码示例，包括如何设置样式及按钮回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在用bootbox.js,发现弹出框没法自定义宽度,于是就看了源码,并改了源码
下面是修改之后的部分代码:

p.dialog = function (a) {
        a = h(a);
        var d = b(n.dialog),
            f = d.find(".modal-dialog"),
            i = d.find(".modal-body"),
            j = a.buttons,
            k = "",
            l = {onEscape: a.onEscape};
        f.css(a.boxCss);//后来添加,用于控制弹出框css
        if (b.fn.modal === c) throw new Error("$.fn.modal is not defined; please double check you have included the Bootstrap JavaScript library. See http://getbootstrap.com/javascript/ for more details.");
        if (g(j, function (a, b) {
            k += "<button data-bb-handler='" + a + "' type='button' class='btn " + b.className + "'>" + b.label + "</button>", l[a] = b.callback
        }), i.find(".bootbox-body").html(a.message), a.animate === !0 && d.addClass("fade"), a.className && d.addClass(a.className), "large" === a.size ? f.addClass("modal-lg") : "small" === a.size && f.addClass("modal-sm"), a.title && i.before(n.header), a.closeButton) {
            var m = b(n.closeButton);
            a.title ? d.find(".modal-header").prepend(m) : m.css("margin-top", "-10px").prependTo(i)
        }
        return a.title && d.find(".modal-title").html(a.title), k.length && (i.after(n.footer), d.find(".modal-footer").html(k)), d.on("hidden.bs.modal", function (a) {
            a.target === this && d.remove()
        }), d.on("shown.bs.modal", function () {
            d.find(".btn-primary:first").focus()
        }), "static" !== a.backdrop && d.on("click.dismiss.bs.modal", function (a) {
            d.children(".modal-backdrop").length && (a.currentTarget = d.children(".modal-backdrop").get(0)), a.target === a.currentTarget && d.trigger("escape.close.bb")
        }), d.on("escape.close.bb", function (a) {
            l.onEscape && e(a, d, l.onEscape)
        }), d.on("click", ".modal-footer button", function (a) {
            var c = b(this).data("bb-handler");
            e(a, d, l[c])
        }), d.on("click", ".bootbox-close-button", function (a) {
            e(a, d, l.onEscape)
        }), d.on("keyup", function (a) {
            27 === a.which && d.trigger("escape.close.bb")
        }), b(a.container).append(d), d.modal({
            backdrop: a.backdrop ? "static" : !1,
            keyboard: !1,
            show: !1
        }), a.show && d.modal("show"), d
    }

下面是调用的代码:

bootbox.dialog({
    boxCss:{"width":"400px"},//这里添加了新的css
    title: "<span class='bigger-110'>确认审核</span>",
    message: "将key_value修改为:"+record.tempKeyValue+",原值:"+record.keyValue,
    buttons:
        {
            "success" :
                {
                    "label" : "<i class='ace-icon fa fa-check'></i> 审核通过",
                    "className" : "btn-sm btn-success",
                    "callback": function() {
                        $.post("system/system-audit",{id:v, isAudit:'1'},function(data){
                            dataList.reload();
                            alert(data.data);
                        },"json");
                    }
                },
            "danger" :
                {
                    "label" : "审核不通过",
                    "className" : "btn-sm btn-danger",
                    "callback": function() {
                        $.post("system/system-audit",{id:v, isAudit:'0'},function(data){
                            dataList.reload();
                            alert(data.data);
                        },"json");
                    }
                }
        }
});