web-dev-qa-db-fra.com

Bootstrap et bootbox: change dynamiquement la largeur de la fenêtre de confirmation

J'utilise Bootstrap pour une application Web et j'utilise bootbox ( http://bootboxjs.com ) pour afficher une fenêtre avant de procéder à une suppression. 

Pour différentes options de suppression, je dois afficher différents messages. J'aimerais afficher des fenêtres de confirmation de différentes largeurs.

Comment puis-je faire cela dynamiquement en code javascript? J'ai tout regardé et je suis incapable de trouver une solution.

Merci pour toutes les idées et suggestions!

À votre santé.

twitter-bootstrapbootbox
12
curious1

Il est possible d'ajouter des classes personnalisées aux fenêtres de bootbox avec 'bootbox.classes'. Je pense que vous devriez créer des classes CSS standard telles que petites, moyennes, grandes et assigner une largeur en CSS. 

Ensuite, dans chaque boîte de démarrage, utilisez une ligne comme ci-dessous (par exemple):

bootbox.classes.add('medium');

Selon la documentation, bootbox.classes est une méthode d'assistance, elle devrait donc fonctionner. http://bootboxjs.com/documentation.html

Il semble être sorti de la documentation, je n'ai aucune idée si la méthode ci-dessus fonctionne toujours. 

Vous trouverez ci-dessous une autre implémentation pour ajouter votre propre classe à une boîte de dialogue (par exemple):

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"
  }
});
18
Nick N.

Aucune des réponses ci-dessus n'a fonctionné pour moi, alors j'ai bricolé jusqu'à ce que ce qui suit a répondu à mes attentes (en utilisant Bootbox.js v4.2.0)

Javascript :

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

CSS:

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

Utilisez jQuery .AddClass chaîné à la fin de bootbox.confirm. Ma mise en œuvre ressemble à ...

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

Il suffit d’ajouter aux réponses précédentes sur l’alerte de démarrage de jQuery. 

Considérez que vous aimeriez utiliser un one-liner plutôt que de vous fier à la déclaration d'une classe css séparément Il suffit de faire, par exemple,

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

.css() de Jquery fait le tour afin que vous puissiez vous débarrasser de .addClass().

5
rdonatoiop

Lors de la configuration de votre boîte, donnez-lui une classe css séparée

<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>
4
Michael Grassman

Vous pouvez utiliser la propriété size. Il ajoute la classe de taille modale Bootstrap appropriée au wrapper de dialogue. Les valeurs valides sont 'large' et 'small'

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

Ou vous pouvez utiliser la propriété className. C'est une classe supplémentaire à appliquer au wrapper de dialogue. 

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

Css 

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

J'utilise setDefaults dans ces exemples, mais ces propriétés peuvent être utilisées dans n'importe quelle boîte de dialogue de démarrage, vous allez remplacer les valeurs par défaut de cette façon.

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

Pour conserver les valeurs par défaut, vous pouvez chaîner un appel jQuery ou même accéder au DOM actuel;).

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

bootbox.classes n'est pas supporté dans les versions> 4.4.0

2
A1rPun

Pour redimensionner toute la boîte de dialogue, utilisez "div.modal-dialog" au lieu de "div.modal-content":

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

Le css utilisé est simplement, par exemple:

.confirmWidth {
  width:350px;
}
1
vess

Utilisez this- size:"small" ou size:"large"

0
Om Shankar