Change css in bootbox window

How to add a style (let say bold) to the "Hello world" in this code:

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

thanks

+7
source share
5 answers

The best thing to do is check the popup using Firebug, and you can see the HTML that makes up the modal, so you can write css for it. After looking at the example on my website, here is the html that makes up the basic example:

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

So, if you want to change the color of the footer:

 .modal-footer {background:#c00;} 
+4
source

James King answer extension:

using the firebug console, you can see the response to the command:

 bootbox.alert('hello world') 

- A link to the boot box containing the div element; Object[div.bootbox]

Therefore, it is very simple to completely override the warning when you call it by simply changing its css attributes:

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

Summarize:

For text style

Add the html line directly to the line:

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

To style bootbox inline elements

Use jQuery return object to change classes, 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"); 
+10
source

You can create an empty opacity 0:

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

then you can just use the opacity change on 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); }); 

and you can freely create msgbox with position, colors or even with some kind of transition

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

Asumming Example.show(); puts this code somewhere on the page, wrapping the element strong will work:

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

All Articles