Home > DeveloperSection > Beginner > Use of Bootbox.js in bootstrap framework

Use of Bootbox.js in bootstrap framework


ASP.Net Bootstrap  Bootstrap Modal 
Ratings:
0 Comment(s)
 6297  View(s)
Rate this:

Use of Bootbox.js in bootstrap framework

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 site builds recently, mainly because it gets me from black-and-white markup to vaguely-presentable websites in a very small amount of time. Version 1.3 introduced some JavaScript plugins to complement the array of stylistic elements it already provided - notably code to invoke dialog boxes, or modals. A recent project I've been working on required extensive use of JavaScript's native alert and confirm dialogs, but their crude behaviour and wildly varying appearance between browsers is always somewhat dissatisfying, so I wanted combine their basic functionality with bootstrap's slick looking dialog boxes. Enter bootbox.js - alert() and confirm() like behaviour using twitter's modal dialog boxes.

Download bootstrap package:

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<script src="~/Scripts/jquery-2.1.1.min.js"></script>

<script src="~/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 programatically using bootstrap:

<a href="#" data-bb="alert" class="bb-trigger btn btn-info" id="launchmodel">Launch Model</a>

<div id="myModal" class="modal fade">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-body">

        <button type="button" class="close" data-dismiss="modal">&times;</button>

        Hello world!

      </div>

      <div class="modal-footer"><button type="button" class="btn btn-primary">OK</button></div>

    </div>

  </div>

</div>

 

$(document).ready(function () {

        $('#launchmodel').click(function () {

            $("#myModal").modal({

                "backdrop": "static",

                "keyboard": true,

                "show": true

            });

        });

    });

 

Output:

 

Dynamically creating the model popup for all kinds of alerts using Bootbox.js

 

Bootbox.js is a jQuery library which enable us to generate the model popup dynamically , this reduce the use of writing the html code for modelpopup  and javascript for every element again and again, it acts as general way to create all type of mdel popup dynamically.

Download Bootbox.js from here: http://bootboxjs.com/

 

Example:

Open model popup using Bootbox.js

 

<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<style>

    .bb-alert {

        position: fixed;

        top: 0;

        right: 0;

        font-size: 1.2em;

        padding: 1em 1.3em;

        z-index: 2000;

    }

</style>

 

 

<div class="clearfix">&nbsp;</div>

<div class="clearfix">&nbsp;</div>

<div class="container">

    <div class="bb-alert alert alert-success" style="display: none;">

        <span>The examples populate this alert with dummy content</span>

    </div>

    <div class="container">

        <p></p>

        <div class="row">

            <div class="col-md-12">

                <a href="#" data-bb="alert" class="bb-trigger btn btn-info">Launch Model</a>

                <a href="#" data-bb="alert_callback" class="btn btn-info">Alert <i class="glyphicon glyphicon-play"></i></a>

                <a href="#" data-bb="confirm" class="btn btn-info">Confirm <i class="glyphicon glyphicon-play"></i></a>

                <a href="#" data-bb="prompt" class="btn btn-info">Prompt <i class="glyphicon glyphicon-play"></i></a>

                <a href="#" data-bb="dialog" class="btn btn-info">Custom Dialog <i class="glyphicon glyphicon-play"></i></a>

            </div>

        </div>

    </div>

</div>

 

<script src="~/Scripts/jquery-2.1.1.min.js"></script>

<script src="~/Scripts/example.js"></script>

<script src="~/Scripts/bootstrap/js/bootstrap.min.js"></script>

 

<script>

    $(function () {

        Example.init({

            "selector": ".bb-alert"

        });

    });

</script>

 

 

<script src="~/Scripts/bootstrap/bootbox.min.js"></script>

<script src="~/Scripts/demos.js"></script>

 

Example.js:

/**

 * This tiny script just helps us demonstrate

 * what the various example callbacks are doing

 */

var Example = (function () {

    "use strict";

 

    var elem,

        hideHandler,

        that = {};

 

    that.init = function (options) {

        elem = $(options.selector);

    };

 

    that.show = function (text) {

        clearTimeout(hideHandler);

 

        elem.find("span").html(text);

        elem.delay(200).fadeIn().delay(4000).fadeOut();

    };

 

    return that;

}());

 

Demo.js:

/**

 * Bootbox Demos; crude, but effective...

 */

$(function () {

    var demos = {};

 

    $(document).on("click", "a[data-bb]", function (e) {

        e.preventDefault();

        var type = $(this).data("bb");

 

        if (typeof demos[type] === 'function') {

            demos[type]();

        }

    });

 

    // let's namespace the demo methods; it makes them easier

    // to invoke

    demos.alert = function () {

        bootbox.alert("Hello world!");

    };

 

    demos.alert_callback = function () {

        bootbox.alert("Hello world!", function () {

            Example.show("Alert Dialog");

        });

    };

 

    demos.confirm = function () {

        bootbox.confirm("Are you sure?", function (result) {

            Example.show("Confirm result: " + result);

        });

    };

 

    demos.alert_button = function () {

        bootbox.alert("This alert has custom button text", "So it does!");

    };

 

    demos.confirm_buttons = function () {

        bootbox.confirm("This confirm has custom buttons - see?", "No", "Yes!", function (result) {

            if (result) {

                Example.show("Well done!");

            } else {

                Example.show("Oh no - try again!");

            }

        });

    };

 

    demos.prompt = function () {

        bootbox.prompt("What is your name?", function (result) {

            if (result === null) {

                Example.show("Prompt dismissed");

            } else {

                Example.show("Hi <b>" + result + "</b>");

            }

        });

    };

 

    demos.dialog = function () {

        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");

                    }

                }

            }

        });

    };

 

});

 

Output:


In my next post i'll explain about Getting start with KnockoutJS in ASP.NET MVC 4


Don't want to miss updates? Please click the below button!

Follow MindStick