Modifier les css dans une fenêtre Bootbox

Question

Comment puis-je ajouter un style (disons un attribut gras) au "Hello world" dans ce code :

bootbox.alert("Hello world!", function() {
   Example.show("Hello world callback");
});

Merci.

Answer 1

Développant la réponse de James King :

En utilisant la console de firebug, vous pouvez voir que la réponse à la commande :

bootbox.alert('hello world')

est une référence à l'élément div contenant la boîte de démarrage ; Object[div.bootbox]

Il est donc très facile de redéfinir totalement l'alerte lorsque vous l'appelez en modifiant simplement ses attributs css :

bootbox.alert('Danger!!' ).find('.modal-content').css({'background-color': '#f99', 'font-weight' : 'bold', color: '#F00', 'font-size': '2em', 'font-weight' : 'bold'} );

Answer 2

Résumons :

Pour le style du texte

Ajoutez directement le html à votre chaîne :

bootbox.alert("<b>Hello world!<b>"); // (thanks BenM)
bootbox.alert("<div class='label'>Hello world!</div>"); // (thanks Adriano)

Pour styliser les éléments intégrés du coffre à bagages

Utilisez l'objet jQuery retourné pour modifier les classes, les css, etc :

var box = bootbox.alert("Hello world!");
box.find('.modal-content').css({'background-color': '#f99'}); // (thanks Mark B)
box.find(".btn-primary").removeClass("btn-primary").addClass("btn-danger");

Answer 3

La meilleure chose à faire est d'inspecter la popup avec firebug et vous pouvez voir le HTML qui compose la fenêtre modale, de sorte que vous pouvez écrire le css pour elle. En regardant l'exemple sur leur site web, voici le HTML qui compose un exemple de base :

<div style="overflow: hidden;" tabindex="-1" class="bootbox modal fade in" aria-hidden="false">
<div class="modal-body">Hello world!</div>
<div class="modal-footer"><a href="javascript:;" class="btn btn-primary" data-handler="0">OK</a></div>
</div>

Donc si vous voulez changer la couleur du pied de page :

.modal-footer {background:#c00;}

Answer 4

Vous pouvez créer un div vide à opacité nulle :

<div id="msgbox"></div>

alors vous pouvez simplement utiliser un changement d'opacité sur les js :

 bootbox.alert(x, function() { 
document.getElementById('msgbox').innerHTML = x; document.getElementById('msgbox').style.opacity= '1'; setTimeout(function(){ document.getElementById('msgbox').style.opacity = '0'; }, 2000);  });

et vous pouvez librement styliser la msgbox, avec la position, les couleurs ou même en utilisant une transition.

#msgbox { color: #CC0000; font-weight: bold; text-align: center; transition: all 1s linear; -webkit-transition: all 1s linear; }

Answer 5

Asumming Example.show(); est de mettre ce code quelque part sur la page, envelopper l'élément avec strong fonctionnera :

 bootbox.alert("Hello world!", function() {
   Example.show("<strong>Hello world</strong> callback");
 });