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

Question

我正在使用Bootstrap进行Web应用程序，并使用bootbox（http：// bootboxjs.com ）在进行删除操作之前显示窗口。

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

我该如何在JavaScript代码中动态实现这一点？我查看了所有内容，但无法找到解决方案。

感谢任何想法和建议！

干杯。

- curious1

---

为什么你接受一个根本不起作用的答案？另一个答案更好。 - OnTheFly

Answer 1

以上答案均未对我起作用，所以我进行了一些尝试，最终找到了以下代码解决了我的问题（使用 Bootbox.js v4.2.0）

Javascript:

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

CSS：

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

- SirDorius

---

你可以使用默认的bootstrap类，例如modal-sm。因此，你的代码可以是：bootbox.alert("Hello").find("div.modal-dialog").addClass("modal-sm"); 使用已有的类可以减少自定义CSS代码行数。 - user991

Answer 2

使用'bootbox.classes'可以向bootbox窗口添加自定义类。我认为您应该创建一些标准的CSS类，如small、medium、large，并在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"
  }
});

- Nick N.

---

这不再在文档中了...被移除了吗？ - user

新版本使用 bootbox.setDefaults(options-object); - Ankur Verma

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

- user3093178

Answer 4

在之前有关使用jquery制作bootbox alert的答案中，我想再补充一些内容。

如果您希望使用一行代码而不是单独声明一个css类，请考虑以下方法，例如：

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

Jquery的.css()方法可以实现这一功能，因此您可以放弃使用.addClass()方法。

- rdonatoiop

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>

- Michael Grassman

---

Michael，感谢你的参与。我正在使用bootbox.confirm()。根据API页面（http://bootboxjs.com/documentation.html），它不允许您提供的配置。我错过了什么吗？这只是一个评论：为每个框定义一个类并不是一个好的解决方案。 - curious1

我正在查看自定义对话框下的示例页面。http://bootboxjs.com/index.html#examples 建议为每个宽度使用一个类是因为这是文档显示设置任何格式属性的唯一方式。 - Michael Grassman

为什么你接受一个甚至不能工作的答案？另一个答案更好。 - OnTheFly

Answer 6

你可以使用 size 属性。它会将相关的 Bootstrap 模态框大小类添加到对话框包装器中。有效值为'large'和'small'。

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

bootbox.classes在版本>4.4.0中不再支持。

- A1rPun

Answer 7

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

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

所使用的CSS只是简单的例如：

。

.confirmWidth {
  width:350px;
}

- vess

Answer 8

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

- Om Shankar

---

或者是“特大号”！ - dandeto