BootboxJS is a cool jQuery plugin based on Bootstrap which will help you to replace the default Javascript Alert, Confirm and Prompt dialogs of your web browsers by a beautiful modal.

Since this jQuery plugin is based on Bootstrap, make sure you are using this front-end framework on your website.

To show you the result we want to achieve by the end of this article, feel free to check the demo here :

See Demo

Integrating BootboxJS

Installing BootboxJS on your website is very easy. You only need to import one small JS file and you are done! So first of all, make sure to download the last version of BootboxJS on their website.

Once it is done, transfer the JS file called “bootbox.all.min.js” on your website and add this line AFTER the bootstrap.min.js script import :

<script src="js/bootbox.all.min.js"></script>

Now, let’s add some HTML buttons that we will use to show the different dialogs :

<a href="" class="btn btn-primary btn-show-alert">Show Alert Dialog</a>
<hr />
<a href="" class="btn btn-danger btn-show-prompt">Show Prompt Dialog</a>
<hr />
<a href="" class="btn btn-info btn-show-confirm">Show Confirm Dialog</a>

As you can see, for each button I have added a specific class to know what type of dialog we will show. Let’s uses these classes in the Javascript code to add click events and show the actual BootboxJS dialogs :

$(".btn-show-alert").click(function(e) {
	e.preventDefault();
	bootbox.alert("Hey! I'm a nice alert dialog!");
});

In this code, I simply specify a click event on the button with the class name .btn-show-alert and in one simple line of code, I am able to show the beautiful Bootbox alert. Easy, isn’t it 🙂 ?

Now, let’s do the same with a prompt dialog :

$(".btn-show-prompt").click(function(e) {
	e.preventDefault();
	
	bootbox.prompt({
	    title: "Hey! What's your name?", 
	    centerVertical: true,
	    callback: function(result){ 
	        // Do something here when OK is clicked...
	    }
	});
});

With the prompt, the code is slightly more complicated because we need to add a callback for when the user type something. The callback is here so you can take an action when the user actually write something in the prompt. You then just need to test what is contained in the result variable with a condition and redirect / do anything else depending on what the user typed.

Lastly, let’s try the confirm version of Bootbox on our last button with this jQuery code :

$(".btn-show-confirm").click(function(e) {
	e.preventDefault();
	
	bootbox.confirm({
	    message: "Do you like jQuery-Script.com?",
	    buttons: {
	        confirm: {
	            label: 'Yes',
	            className: 'btn-success'
	        },
	        cancel: {
	            label: 'Nope!',
	            className: 'btn-danger'
	        }
	    },
	    callback: function (result) {
	        // Do anything here when a button is clicked...
	    }
	});
});

Still a bit more complicated than the previous ones but easy to understand. Actually, a confirm dialog gives two options to the user with some buttons. For example, I often use it on a “delete” action to ask for a confirmation when a user is about to delete some data (Are you sure you want to delete X? Yes / No).

In the above code, we just specify the message and then, we give the informations about our buttons that will be shown… And finally, just like the previous example, we provide a callback that will let us take any action when one of the buttons is clicked.

So we are done with this article. Feel free to download the sources behind this tutorial directly here :

Download Sources

If you have any questions, need any help or want to say something, feel free to leave a comment below…

… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :