14

我正在将 Bootstrap 用于 Web 应用程序，并使用 bootbox ( http://bootboxjs.com ) 在继续删除操作之前显示一个窗口。

对于不同的删除选项，我需要显示不同的消息。我想显示不同宽度的确认窗口。

如何在 javascript 代码中动态执行此操作？我查看了所有内容，但无法找到解决方案。

感谢您的任何想法和建议！

干杯。

4

8 回答 8

27

上面的答案都不适合我，所以我一直在摆弄，直到下面的结果符合我的预期（使用Bootbox.js v4.2.0）

Javascript：

bootbox.alert("Hello").find("div.modal-dialog").addClass("largeWidth");

CSS：

.largeWidth {
    margin: 0 auto;
    width: 90%;
}
于 2014-05-22T12:38:26.633 回答
17

可以使用“bootbox.classes”将自定义类添加到引导箱窗口。我认为你应该制作一些标准的 CSS 类，如小、中、大，并在 CSS 中指定宽度。

然后在每个引导箱中使用如下所示的行（例如）：

bootbox.classes.add('medium');

根据文档 bootbox.classes 是一个辅助方法，所以它应该可以工作。http://bootboxjs.com/documentation.html

它似乎已从文档中删除，我不知道上述方法是否仍然有效。

下面是将您自己的类添加到对话框的另一个实现（例如）：

bootbox.dialog({

  message: "I am a custom dialog",
  animate: true,

  /**
   * @optional String
   * @default: null
   * an additional class to apply to the dialog wrapper
   */
  className: "medium"
  }
});
于 2013-07-31T21:59:06.757 回答
7

使用链接到 bootbox.confirm 末尾的 jQuery .AddClass。我的实现看起来像......

$("a#ArchiveBtn").click(function () {
    bootbox.confirm("Archive Location? Cannot be undone", function (result) {
        if (result) {
            $("form#ArchiveForm").submit();
        }

    }).find("div.modal-content").addClass("confirmWidth");
});

CSS...

/* BootBox Extension*/
.confirmWidth {
    width: 350px;
    margin: 0 auto;
}
于 2013-12-11T22:45:04.633 回答
5

只是添加到 jquery'ing bootbox alert 的先前答案。

考虑您想使用单行而不是单独依赖 css 类的声明。只是做，例如，

bootbox.alert("Customizing width and height.").find("div.modal-dialog").css({ "width": "100%", "height": "100%" });

Jquery 的.css()诀窍让你可以摆脱.addClass().

于 2017-02-24T17:52:43.470 回答
4

在设置你的盒子时，给它一个单独的 css 类

<style>
   .class-with-width { width: 150px !important; }
</style>
<script>
bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "class-with-width",
    "callback": function() {
        Example.show("great success");
    }
}]);
<script>
于 2013-07-02T00:45:59.583 回答
2

您可以使用该size物业。它将相关的 Bootstrap 模态大小类添加到对话框包装器中。有效值为“大”和“小”

bootbox.setDefaults({ size: 'small' });

或者您可以使用该className属性。这是一个应用于对话框包装器的附加类。

bootbox.setDefaults({ className: 'w-100' });

CSS

// Example class (a bootstrap v4 utility class)
.w-100 {
    width: 100%;
}

我setDefaults在这些示例中使用，但这些属性可用于任何引导框对话框，您将通过这种方式覆盖默认值。

bootbox.alert({ message: 'But without me how can you have mass?', className: 'w-100' })

要保留默认值，您可以链接一个 jQuery 调用，甚至访问实际的 DOM ;)。

bootbox.alert('Whoops!').addClass('w-100');
bootbox.alert('Sorry!')[0].classList.add('w-100');

bootbox.classes版本不支持 >4.4.0

于 2017-01-05T21:50:26.353 回答
1

要调整整个对话框的大小，请使用“div.modal-dialog”而不是“div.modal-content”：

.find("div.modal-dialog").addClass("confirmWidth");

使用的 css 很简单，例如：

.confirmWidth {
  width:350px;
}
于 2015-03-23T16:40:54.790 回答
0

使用这个 -size:"small"或size:"large"

于 2016-06-17T10:17:17.563 回答