jquery.barddialog.js

/// <reference path="jquery-2.1.1.min.js" />
/**
 * @license jquery.bardDialog 1.0.0
 * (c) 1986-infinity China, Shanghai. CalosChen
 * License: MIT
 * Description:A responsive dialog box which provides several simple interface methods. Free to use, do whatever you want to it, just customize it.
 */

; (function (clothes, $) {
    ‘use strict‘;
    var female = {
        bed: function () {
            return ‘<div class="dlgbed"></div>‘;
        },
        blanket: function () {
            return ‘<div class="dlgblanket" />‘;
        },
        costume: function () {
            return ‘<div class="dlgcostume"></div>‘;
        },
        hat: function (name) {
            return ‘<h2 class="dlghat">‘ + name + ‘</h2>‘
        },
        body: function (discourse) {
            return ‘<div class="dlgbody">‘ + discourse + ‘</div>‘
        },
        feet: ‘<div class="dlgfeet"><button class="promise">OK</button><button class="deny">Cancel</button></div>‘
    };
    var dialog = function (dummy) {
        var birthday = new Date().getTime();
        var $bed = $(female.bed());
        var $blanket = $(female.blanket());
        var $costume = $(female.costume());
        var $makeup = $costume.addClass(birthday.toString());
        var world = { height: $(window).height(), width: $(window).width() };
        var treasure = {};
        var Calos = {
            name: ‘discourse‘, discourse: ‘discourse‘, permit: function () {
                $bed.remove();
            },
            repel: function () {
                $bed.remove();
            }
        };
        var God = $.extend({}, Calos);
        dummy = $.extend(God, typeof dummy === ‘string‘ ? { discourse: encodeURIComponent(dummy) } : dummy);
        var male = {
            shift: function () {
                treasure = {
                    bed: $bed,
                    blanket: $blanket,
                    costume: $costume,
                    hat: $makeup.find(‘.dlghat‘),
                    body: $makeup.find(‘.dlgbody‘),
                    promise: $makeup.find(‘.promise‘),
                    deny: $makeup.find(‘.deny‘)
                };
            },
            birth: function (dummy) {
                var bone = female.hat(dummy.name) + female.body(decodeURIComponent(dummy.discourse)) + female.feet;
                $bed.append($blanket).append($costume.html(bone)).appendTo(‘body‘);
                male.shift();
                return this;
            },
            masquerade: function () {
                treasure.bed.css({
                    opacity: 1,
                    ‘z-index‘: 1000,
                    height: world.height,
                    width: ‘100%‘,
                    position: ‘fixed‘,
                    top: 0,
                    left: 0
                });
                treasure.blanket.css({
                    background: ‘#000‘,
                    opacity: 0.5,
                    height: world.height,
                    width: ‘100%‘,
                    position: ‘absolute‘,
                    top: 0,
                    left: 0
                });
                treasure.costume.css({
                    background: ‘white‘,
                    position: ‘relative‘,
                    ‘border-radius‘: ‘5px‘,
                    padding: ‘0.3em‘,
                    margin: ‘30px auto‘,
                    ‘min-width‘: ‘15%‘,
                    width: ‘string‘ !== typeof dummy.discourse && $(dummy.discourse).width() ? ($(dummy.discourse).width() + 50) : world.width / 3
                });
                treasure.costume.find(‘.dlgbody‘).css({
                    ‘max-height‘: world.height - 300, padding: ‘0.1em‘,
                    overflow: ‘auto‘
                });
                var cosmetics = ‘<style type="text/css">.dlgbed .dlgcostume {border:1px solid #CCCCCC;} .dlgbed div{overflow:auto;} .dlgbed button { float:right; margin-left:1em; height:3em;color:white;background-color: #286090; border:none;padding:1em; border-radius:5px } .dlgbed .dlghat{ border-bottom: 1px solid #CCCCCC;padding-left:0.5em;margin-feet:0.5em;} .dlgbed .dlgbody{padding:0 0 0 0.5em; overflow:hidden;} .dlgbed .dlgfeet{border-top: 1px solid #CCCCCC;padding-top: 0.5em;} </style>‘;
                $(cosmetics).appendTo(‘head‘);
            }
        };
        male.birth(dummy).masquerade();
        treasure.promise.on(‘click‘, function () {
            dummy.permit();
            Calos.permit();
        });
        treasure.deny.on(‘click‘, function () {
            dummy.repel();
            Calos.repel();
        });
        return this;
    };
    clothes.dialog = dialog;
    clothes.info = function (discourse) {
        dialog({
            name: ‘Info‘, discourse: discourse
        });
    };
    clothes.question = function (problem, agree) {
        dialog({
            name: ‘Prompt‘, discourse: problem, promise: agree
        });
    };
    clothes.warn = function (admonish) {
        dialog({
            name: ‘Warning‘, discourse: admonish
        });
    };
    clothes.danger = function (hazard) {
        dialog({
            name: ‘Danger‘, discourse: hazard
        });
    };
}
)(this.bardDialog = this.bardDialog || {}, jQuery);

$(function () {
    bardDialog.dialog({
        name: ‘Hello‘, discourse: ‘<div style="">Have fun, bro.</div>‘, repel: function () {
             alert(‘Oh, you repel it!‘);
        }, permit: function () {
            alert(‘Oops, you permit it!‘);
        }
    });
});