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

Question

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

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

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

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

Cheers.

Answer 1

можно добавить пользовательские классы bootbox окна с «bootbox.classes». Я думаю, вы должны сделать некоторые стандартные классы CSS, такие как малая, средняя, ​​большая и asign ширина в 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 2

При настройке окна дают отдельный класс 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 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

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

Javascript:

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

CSS:

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

Answer 5

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

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

CSS-код используется просто:

.confirmWidth { 
    width:350px; 
} 

Answer 6

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

Answer 7

Вы можете использовать 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

Answer 8

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

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

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

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