Question

我正在使用Bootstrap作为Web应用程序，并使用bootbox（http://bootboxjs.com）显示一个窗口，然后再继续执行删除操作。

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

如何在javascript代码中动态执行此操作？我看了一切，无法找到解决方案。

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

干杯。

Answer 1

上面的答案都没有对我有用，所以我摆弄了一下，直到下面做了我的预期（使用 Bootbox.js v4.2.0 ）

<强>的Javascript ：

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

<强> CSS ：

.largeWidth {
    margin: 0 auto;
    width: 90%;
}

Answer 2

可以使用'bootbox.classes'向bootbox窗口添加自定义类。我认为你应该制作一些标准的CSS类，如小型，中型，大型和CSS中的宽度。

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

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

Answer 3

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

$("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;
}

Answer 4

只需添加以前关于jquery＆bootbox警报的答案。

考虑你想使用单行而不是单独依赖css类的声明。就这样做，例如，

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

Jquery的.css()可以解决问题，因此你可以摆脱.addClass()。

Answer 5

设置你的盒子时，给它一个单独的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>

Answer 6

您可以使用size属性。它将相关的Bootstrap模式大小类添加到对话框包装器中。有效值是“大”＆＃39;和＆＃39;小＆＃39;

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

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

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

<强>的CSS

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

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

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');

版本＆gt;中不支持
bootbox.classes 4.4.0

Answer 7

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

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

使用的css就是例如：

.confirmWidth {
  width:350px;
}

Answer 8

使用此 - size:"small"或size:"large"

Bootstrap和bootbox：动态更改确认窗口的宽度

8 个答案: