Jquery Bootstrap - Simple Dialog / Confirm Box

Jquery Bootstrap - Simple Dialog / Confirm Box Example: to show how to extend a jquery custom function and Also a custom message dialog box

by suraj mahajan

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
     <h2>Main Page Title</h2>

    <p>This is a sample text</p> <a href="#" class="dlconf">Open confirm box</a>

</div>

JavaScript

$.fn.nbDialogBox = function (options) {
            options = options || {};

            // set up default options
            var defaults = {
                title: "Warning!",
                body: "",
                isConfirm: false,
                fnOnOk: function () {
                    alert("Funtion: ok called");
                },
                fnOnCancel: function () {
                    alert("Function: cancel called");
                }
            };

            // Overwrite default options
            // with user provided ones
            // and merge them into "options".
            options = $.extend({}, defaults, options);

            var msgTitle = options.title;
            var msgBody = options.body;

            // alert HTML
            var tmpWarning = $('<div class="nb-alert-warning">' +
                '<div class="alert alert-dismissable alert-warning col-lg-3 " style="width:60%;">' +
                '<button data-dismiss="alert" class="close nb-msg-close" type="button">×</button>' +
                '<h4 class="nb-msg-title">Warning!</h4>' +
                '<p class="nb-msg-body"></p>' +
                '</div>' +
                '</div>');

            // alert fade box
            var tmpFadeDiv = $("<div class='nb-jq-fade' style='position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 999; opacity: 0.6; background-color: #777777'></div>");

            var btnOk = '<button class="btn btn-default btn-xs pull-right nb-btn-ok" type="button">Ok</button>';
            var btnCancel = '<button class="btn btn-default btn-xs pull-right nb-btn-cancel" type="button">Cancel</button><span class="pull-right">&nbsp;</span>';

            tmpWarning.find("p.nb-msg-body").html(msgBody);
            tmpWarning.find("h4.nb-msg-title").text(msgTitle);


            var fnClose = function () {
                var sel = ".nb-msg-close";
                $(sel).parents(".nb-alert-warning").slideUp(false,...