Hi everyone in this article I’m explaining about Bootbox.js file of bootstrap for model dialog.
Description:
I’ve been using twitter's bootstrap framework for a number of sites builds recently, mainly because it gets me from black-and-white markup to vaguely-presentable websites in a very small amount of time.
If we talk about the latest version 1.3 of JavaScript, we know that some JavaScript plugins have been introduced in it to complement the array of stylistic elements already provided - specifically the dialog box or modal Code to implement.
A recent project I've been working on required extensive use of JavaScript's native alert and confirm dialogs, but their crude behavior and wildly varying appearance between browsers is always somewhat dissatisfying, so I wanted to combine their basic functionality with bootstrap's slick-looking dialog boxes. Enter bootbox.js - alert () and confirm () like behavior using twitter's modal dialog boxes.
Download bootstrap package:
<linkhref="~/Content/bootstrap/css/bootstrap.min.css"rel="stylesheet"/>
<scriptsrc="~/Scripts/jquery-2.1.1.min.js"></script>
<scriptsrc="~/Scripts/bootstrap/js/bootstrap.min.js"></script>
Dialog using Twitter Bootstrap:
You may be wondering why a few wrapper methods around bootstrap's built-in dialog capabilities are either necessary or desirable. To begin to answer that, let's look at the code required to show a simple alert style dialog programmatically using bootstrap:
"str">"tag">"tag"><a href="str">"str">"str">"#" data-bb="str">"str">"str">"alert" class="str">"str">"str">"bb-trigger btn btn-info" id="str">"str">"str">"launchmodel">Launch Model"str">"tag">"tag"></a>
"str">"tag">"tag"><div id="str">"str">"str">"myModal" class="str">"str">"str">"modal fade">
"str">"tag">"tag"><div class="str">"str">"str">"modal-dialog">
"str">"tag">"tag"><div class="str">"str">"str">"modal-content">
"str">"tag">"tag"><div class="str">"str">"str">"modal-body">
"str">"tag">"tag"><button type="str">"str">"str">"button" class="str">"str">"str">"close" data-dismiss="str">"str">"str">"modal">×"str">"tag">"tag"></button>
Hello world!
"str">"tag">"tag"></div>
"str">"tag">"tag"><div class="str">"str">"str">"modal-footer">"str">"tag">"tag"><button type="str">"str">"str">"button" class="str">"str">"str">"btn btn-primary">OK"str">"tag">"tag"></button>"str">"tag">"tag"></div>
"str">"tag">"tag"></div>
"str">"tag">"tag"></div>
"str">"tag">"tag"></div>
$"str">"bracket">"bracket">(document"str">"bracket">"bracket">)"str">"selector">"selector">.ready"str">"bracket">"bracket">("keyword">function "str">"bracket">"bracket">("str">"bracket">"bracket">) "str">"bracket">"bracket">{
$"str">"bracket">"bracket">("str">"str">"str">'#launchmodel'"str">"bracket">"bracket">)"str">"selector">"selector">.click"str">"bracket">"bracket">("keyword">function "str">"bracket">"bracket">("str">"bracket">"bracket">) "str">"bracket">"bracket">{
$"str">"bracket">"bracket">("str">"str">"str">"#myModal""str">"bracket">"bracket">)"str">"selector">"selector">.modal"str">"bracket">"bracket">("str">"bracket">"bracket">{
"str">"str">"str">"backdrop": "str">"str">"str">"static",
"str">"str">"str">"keyboard": true,
"str">"str">"str">"show": true
"str">"bracket">"bracket">}"str">"bracket">"bracket">);
"str">"bracket">"bracket">}"str">"bracket">"bracket">);
"str">"bracket">"bracket">}"str">"bracket">"bracket">);
"str">"the-num">"the-num">
Dynamically creating the model popup for all kinds of alerts using Bootbox.js
Bootbox.js is a jQuery library that enables us to generate the model popup dynamically, this reduces the use of writing the HTML code for model popup and javascript for every element, again and again, it acts as a general way to create all type of model popup dynamically.
Download Bootbox.js from here: http://bootboxjs.com/
Example:
Open model popup using Bootbox.js
"str">"tag">"tag"><link href="str">"str">"str">"~/Content/bootstrap/css/bootstrap.min.css" rel="str">"str">"str">"stylesheet" />
"str">"tag">"tag"><style>
"str">"selector">"selector">.bb-alert "str">"bracket">"bracket">{
"attribute">position: fixed;
"attribute">top: "num">0;
"attribute">right: "num">0;
"attribute">font-size: "num">1"str">"selector">."num">2em;
"attribute">padding: "num">1em "num">1"str">"selector">."num">3em;
"attribute">z-index: "num">2000;
"str">"bracket">"bracket">}
"str">"tag">"tag"></style>
"str">"tag">"tag"><div class="str">"str">"str">"clearfix"> "str">"tag">"tag"></div>
"str">"tag">"tag"><div class="str">"str">"str">"clearfix"> "str">"tag">"tag"></div>
"str">"tag">"tag"><div class="str">"str">"str">"container">
"str">"tag">"tag"><div class="str">"str">"str">"bb-alert alert alert-success" style="str">"str">"str">"display: none;">
"str">"tag">"tag"><span>The examples populate "str">"keyword">"keyword">this alert "str">"keyword">"keyword">with dummy content"str">"tag">"tag"></span>
"str">"tag">"tag"></div>
"str">"tag">"tag"><div class="str">"str">"str">"container">
"str">"tag">"tag"><p>"str">"tag">"tag"></p>
"str">"tag">"tag"><div class="str">"str">"str">"row">
"str">"tag">"tag"><div class="str">"str">"str">"col-md-12">
"str">"tag">"tag"><a href="str">"str">"str">"#" data-bb="str">"str">"str">"alert" class="str">"str">"str">"bb-trigger btn btn-info">Launch Model"str">"tag">"tag"></a>
"str">"tag">"tag"><a href="str">"str">"str">"#" data-bb="str">"str">"str">"alert_callback" class="str">"str">"str">"btn btn-info">Alert "str">"tag">"tag"><i class="str">"str">"str">"glyphicon glyphicon-play">"str">"tag">"tag"></i>"str">"tag">"tag"></a>
"str">"tag">"tag"><a href="str">"str">"str">"#" data-bb="str">"str">"str">"confirm" class="str">"str">"str">"btn btn-info">Confirm "str">"tag">"tag"><i class="str">"str">"str">"glyphicon glyphicon-play">"str">"tag">"tag"></i>"str">"tag">"tag"></a>
"str">"tag">"tag"><a href="str">"str">"str">"#" data-bb="str">"str">"str">"prompt" class="str">"str">"str">"btn btn-info">Prompt "str">"tag">"tag"><i class="str">"str">"str">"glyphicon glyphicon-play">"str">"tag">"tag"></i>"str">"tag">"tag"></a>
"str">"tag">"tag"><a href="str">"str">"str">"#" data-bb="str">"str">"str">"dialog" class="str">"str">"str">"btn btn-info">Custom Dialog "str">"tag">"tag"><i class="str">"str">"str">"glyphicon glyphicon-play">"str">"tag">"tag"></i>"str">"tag">"tag"></a>
"str">"tag">"tag"></div>
"str">"tag">"tag"></div>
"str">"tag">"tag"></div>
"str">"tag">"tag"></div>
"str">"tag">"tag"><script src="str">"str">"str">"~/Scripts/jquery-2.1.1.min.js">"str">"tag">"tag"></script>
"str">"tag">"tag"><script src="str">"str">"str">"~/Scripts/example.js">"str">"tag">"tag"></script>
"str">"tag">"tag"><script src="str">"str">"str">"~/Scripts/bootstrap/js/bootstrap.min.js">"str">"tag">"tag"></script>
"str">"tag">"tag"><script>
$"str">"bracket">"bracket">("keyword">function "str">"bracket">"bracket">("str">"bracket">"bracket">)"str">"bracket">"bracket">{
Example"str">"selector">"selector">.init"str">"bracket">"bracket">("str">"bracket">"bracket">{
"str">"str">"str">"selector": "str">"str">"str">".bb-alert"
"str">"bracket">"bracket">}"str">"bracket">"bracket">);
"str">"bracket">"bracket">}"str">"bracket">"bracket">);
"str">"tag">"tag"></script>
"str">"tag">"tag"><script src="str">"str">"str">"~/Scripts/bootstrap/bootbox.min.js">"str">"tag">"tag"></script>
"str">"tag">"tag"><script src="str">"str">"str">"~/Scripts/demos.js">"str">"tag">"tag"></script>
"str">"the-num">"the-num">
Example.js:
">">"comment">"comment">/**
* ">"str">"keyword">This tiny script just helps us demonstrate
* what the various example callbacks are doing
*/
var Example = ">">"bracket">"bracket">(function ">"str">"bracket">">"bracket">"bracket">(">">"bracket">"bracket">) ">"str">"bracket">">"bracket">"bracket">{
">">"str">"str">"use strict";
var elem,
hideHandler,
that = ">"str">"bracket">">"bracket">"bracket">{">">"bracket">"bracket">};
that">"str">"selector">">"selector">"selector">.init = function ">">"bracket">"bracket">(options">"str">"bracket">">"bracket">"bracket">) ">">"bracket">"bracket">{
elem = $">"str">"bracket">">"bracket">"bracket">(options">">"selector">"selector">.selector">"str">"bracket">">"bracket">"bracket">);
">">"bracket">"bracket">};
that">"str">"selector">">"selector">"selector">.show = function ">">"bracket">"bracket">(text">"str">"bracket">">"bracket">"bracket">) ">">"bracket">"bracket">{
clearTimeout">"str">"bracket">">"bracket">"bracket">(hideHandler">">"bracket">"bracket">);
elem">"str">"selector">">"selector">"selector">.find">">"bracket">"bracket">(">"str">"str">">"str">"str">"span"">">"bracket">"bracket">)">"str">"selector">">"selector">"selector">.html">">"bracket">"bracket">(text">"str">"bracket">">"bracket">"bracket">);
elem">">"selector">"selector">.delay">"str">"bracket">">"bracket">"bracket">(">">"num">"num">200">"str">"bracket">">"bracket">"bracket">)">">"selector">"selector">.fadeIn">"str">"bracket">">"bracket">"bracket">(">">"bracket">"bracket">)">"str">"selector">">"selector">"selector">.delay">">"bracket">"bracket">(">"str">"num">">"num">"num">4000">">"bracket">"bracket">)">"str">"selector">">"selector">"selector">.fadeOut">">"bracket">"bracket">(">"str">"bracket">">"bracket">"bracket">);
">">"bracket">"bracket">};
return that;
">"str">"bracket">">"bracket">"bracket">}">">"bracket">"bracket">(">"str">"bracket">">"bracket">"bracket">)">">"bracket">"bracket">);">"str">"the-num">">"the-num">"the-num">
Demo.js:
">">"comment">"comment">/**
* Bootbox Demos; crude, but effective...
*/
$">"str">"bracket">">"bracket">"bracket">(function ">">"bracket">"bracket">(">"str">"bracket">">"bracket">"bracket">) ">">"bracket">"bracket">{
var demos = ">"str">"bracket">">"bracket">"bracket">{">">"bracket">"bracket">};
$">"str">"bracket">">"bracket">"bracket">(document">">"bracket">"bracket">)">"str">"selector">">"selector">"selector">.on">">"bracket">"bracket">(">"str">"str">">"str">"str">"click", ">">"str">"str">"a[data-bb]", function ">"str">"bracket">">"bracket">"bracket">(e">">"bracket">"bracket">) ">"str">"bracket">">"bracket">"bracket">{
e">">"selector">"selector">.preventDefault">"str">"bracket">">"bracket">"bracket">(">">"bracket">"bracket">);
var type = $">"str">"bracket">">"bracket">"bracket">(this">">"bracket">"bracket">)">"str">"selector">">"selector">"selector">.data">">"bracket">"bracket">(">"str">"str">">"str">"str">"bb"">">"bracket">"bracket">);
if ">"str">"bracket">">"bracket">"bracket">(typeof demos">">"bracket">"bracket">[type">"str">"bracket">">"bracket">"bracket">] === ">">"str">"str">'function'">"str">"bracket">">"bracket">"bracket">) ">">"bracket">"bracket">{
demos">"str">"bracket">">"bracket">"bracket">[type]">">"bracket">"bracket">(">"str">"bracket">">"bracket">"bracket">);
">">"bracket">"bracket">}
">"str">"bracket">">"bracket">"bracket">}">">"bracket">"bracket">);
// let's namespace the demo methods; it makes them easier
// to invoke
demos"selector">.alert = "keyword">function"bracket">("bracket">)"bracket">{
bootbox"selector">.alert"bracket">("str">"Hello world!""bracket">);
"bracket">};
demos"selector">.alert_callback = "keyword">function"bracket">("bracket">)"bracket">{
bootbox"selector">.alert"bracket">("str">"Hello world!", "keyword">function"bracket">("bracket">)"bracket">{
Example"selector">.show"bracket">("str">"Alert Dialog""bracket">);
"bracket">}"bracket">);
"bracket">};
demos"selector">.confirm = "keyword">function"bracket">("bracket">)"bracket">{
bootbox"selector">.confirm"bracket">("str">"Are you sure?", "keyword">function"bracket">(result"bracket">)"bracket">{
Example"selector">.show"bracket">("str">"Confirm result: " + result"bracket">);
"bracket">}"bracket">);
"bracket">};
demos"selector">.alert_button = "keyword">function"bracket">("bracket">)"bracket">{
bootbox"selector">.alert"bracket">("str">"This alert has custom button text", "str">"So it does!""bracket">);
"bracket">};
demos"selector">.confirm_buttons = "keyword">function"bracket">("bracket">)"bracket">{
bootbox"selector">.confirm"bracket">("str">"This confirm has custom buttons - see?", "str">"No", "str">"Yes!", "keyword">function"bracket">(result"bracket">)"bracket">{
"keyword">if"bracket">(result"bracket">)"bracket">{
Example"selector">.show"bracket">("str">"Well done!""bracket">);
"bracket">}"keyword">else"bracket">{
Example"selector">.show"bracket">("str">"Oh no - try again!""bracket">);
"bracket">}
"bracket">}"bracket">);
"bracket">};
demos"selector">.prompt = "keyword">function"bracket">("bracket">)"bracket">{
bootbox"selector">.prompt"bracket">("str">"What is your name?", "keyword">function"bracket">(result"bracket">)"bracket">{
"keyword">if"bracket">(result === "keyword">null"bracket">)"bracket">{
Example"selector">.show"bracket">("str">"Prompt dismissed""bracket">);
"bracket">}"keyword">else"bracket">{
Example"selector">.show"bracket">("str">"Hi <b>" + result + "str">"</b>""bracket">);
"bracket">}
"bracket">}"bracket">);
"bracket">};
demos"selector">.dialog = "keyword">function"bracket">("bracket">)"bracket">{
bootbox"selector">.dialog"bracket">("bracket">{
"attribute">message: "str">"I am a custom dialog",
"attribute">title: "str">"Custom title",
"attribute">buttons: "bracket">{
"attribute">success: "bracket">{
"attribute">label: "str">"Success!",
"attribute">className: "str">"btn-success",
"attribute">callback: "keyword">function"bracket">("bracket">)"bracket">{
Example"selector">.show"bracket">("str">"great success""bracket">);
"bracket">}
"bracket">},
"attribute">danger: "bracket">{
"attribute">label: "str">"Danger!",
"attribute">className: "str">"btn-danger",
"attribute">callback: "keyword">function"bracket">("bracket">)"bracket">{
Example"selector">.show"bracket">("str">"uh oh, look out!""bracket">);
"bracket">}
"bracket">},
"attribute">main: "bracket">{
"attribute">label: "str">"Click ME!",
"attribute">className: "str">"btn-primary",
"attribute">callback: "keyword">function"bracket">("bracket">)"bracket">{
Example"selector">.show"bracket">("str">"Primary button""bracket">);
"bracket">}
"bracket">}
"bracket">}
"bracket">}"bracket">);
"bracket">};
"bracket">}"bracket">);">"str">"the-num">">"the-num">"the-num">
Output:
In my next post, I'll explain Getting started with KnockoutJS in ASP.NET MVC 4
Leave Comment