Intelliwins Blog

Anything you wanna know about?

Alert Box for Bootstrap 3.0

by Admin 26. November 2013 16:26
Twitter Bootstrap Comes With a Bunch of Controls for Rapid Application Development. They Enhanced and Redesigned it with the release of Version 3.0 by adapting Flat design philosophy . It has a lot of predefined controls and CSS Class which makes App design Hell lot of easier . Now this simple plugin Bootbox JS makes it Even more easier for development with some simple alert box. We use alert box or you can say message box quite often during development. When password is incorrect or when we delete a data we have a requirement for confirmation box. This tiny Jquery Library is the single stop solution for all the requirement.   Dependencies It depends on the Twitter Bootstrap 3.X and Jquery. Not that difficult i guess. Usages Once you included the dependence file the coding is quite simple. <!DOCTYPE html><html><head><meta charset="utf-8"><title>My page</title> <!-- CSS dependencies --><link rel="stylesheet" type="text/css" href="bootstrap.min.css"></head><body> <p>Content here. <a class="alert" href=#>Alert!</a></p> <!-- JS dependencies --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script src="bootstrap.min.js"></script> <!-- bootbox code --><script src="bootbox.min.js"></script><script>$(document).on("click", ".alert", function(e) {bootbox.alert("Hello world!", function() {console.log("Alert Callback");});});</script></body></html> Well That It !! If you a little bit familiar with using any other Jquery library you can start working straight forward. Now some Advanced Stuffs Need a Confirmation Box The Here we are bootbox.confirm("Are you sure?", function(result) {Example.show("Confirm result: "+result);}); As Simple as that !!!   Okay Need a Customized Alert Box with Multiple Button.   bootbox.dialog({message: "I am a custom dialog",title: "Custom title",buttons: {success: {label: "Success!",className: "btn-success",callback: function() {Example.show("great success");}},danger: {label: "Danger!",className: "btn-danger",callback: function() {Example.show("uh oh, look out!");}},main: {label: "Click ME!",className: "btn-primary",callback: function() {Example.show("Primary button");}}}});   Isn't That simple .   Download Full version JS Minified Version JS

Tags: ,

CSS | Freebies | Jquery | Tips and tricks

Brit Colony, Bhubaneswar,India +91 94384 80191 info@ intelliwins.com

About Us

Intelliwins mission is to alter the dynamics of the software industry by providing trusted, supportive and quality software development servies to clients that view our partnership as a strategic driver for their success.

Newsletter

Enter your email to join our mailing list