Bootstrap и bootbox: динамическое изменение ширины окна подтверждения

Я использую Bootstrap для веб-приложения и используя bootbox (http://bootboxjs.com) для отображения окна перед продолжением операции удаления.

Для разных параметров удаления мне нужно отображать разные сообщения. Я хотел бы показать окна подтверждения с разной шириной.

Как я могу сделать это динамически в javascript-коде? Я посмотрел на все и не смог найти решение.

Спасибо за любые идеи и предложения!

Приветствия.

Ответ 1

Можно добавить пользовательские классы в окна bootbox с помощью "bootbox.classes". Я думаю, вы должны сделать некоторые стандартные классы CSS, такие как малая, средняя, большая и asign ширина в 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"
  }
});

Ответ 2

Ни один из вышеперечисленных ответов не работал у меня, поэтому я работал, пока следующее не выполнило то, что я ожидал (используя Bootbox.js v4.2.0)

Javascript

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

CSS

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

Ответ 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;
}

Ответ 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>

Ответ 5

Просто добавьте предыдущие ответы на jquery'ing bootbox alert.

Считайте, что вы хотели бы использовать однострочный вкладыш, а не полагаться на объявление класса css отдельно. Просто сделайте, например,

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

JQuery .css() делает трюк, чтобы вы могли избавиться от .addClass().

Ответ 6

Чтобы изменить размер всего диалогового окна, используйте "div.modal-dialog" вместо "div.modal-content":

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

Используемый css - это просто, например:

.confirmWidth {
  width:350px;
}

Ответ 7

Используйте это - size:"small" или size:"large"

Ответ 8

Вы можете использовать свойство 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, таким образом вы переопределите значения по умолчанию.

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