Admin+ lovely headline here

Modals

Launch demo modal 
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
	  <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	    <h4 class="modal-title">Modal title</h4>
	  </div>
	  <div class="modal-body">
	  ...
	  </div>
	  <div class="modal-footer">
	    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	    <button type="button" class="btn btn-primary">Save changes</button>
	  </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="separator bottom"></div>
<!-- // Modal inline END -->

BootBox Manage modals with JavaScript API

Alert

bootbox.alert("Hello World!", function(result) 
{
	$.gritter.add({
		title: 'Callback!',
		text: "I'm just a BootBox Alert callback!"
	});
});

Confirm

bootbox.confirm("Are you sure?", function(result) 
{
	$.gritter.add({
		title: 'Callback!',
		text: "BootBox Confirm Callback with result: "+ result
	});
});

Prompt

bootbox.prompt("What is your name?", function(result) 
{                
	if (result === null) {                                             
		$.gritter.add({
			title: 'Callback!',
			text: "BootBox Prompt Dismissed!"
		});                            
	} else {
		$.gritter.add({
			title: 'Hi ' + result,
			text: "BootBox Prompt Callback with result: "+ result
		});                          
	}
});

Custom Dialog

bootbox.dialog("I am a custom dialog", [{
	"label" : "Success!",
	"class" : "btn-success",
	"callback": function() {
		$.gritter.add({
			title: 'Callback!',
			text: "Great success"
		});
	}
}, {
	"label" : "Danger!",
	"class" : "btn-danger",
	"callback": function() {
		$.gritter.add({
			title: 'Callback!',
			text: "Uh oh, look out!"
		});
	}
}, {
	"label" : "Click ME!",
	"class" : "btn-primary",
	"callback": function() {
		$.gritter.add({
			title: 'Callback!',
			text: "Primary button!"
		});
	}
}, {
	"label" : "Just a button..."
}]);
× close

Themer color options