Cacher is the code snippet organizer for pro developers

//调用
//这是一个用seajs和jquery写的一个对话框插件，比较简单，更改样式也方便，调用的时候传入触发器trigger、对话框宽度width、对话框的名称title、对话框内容content即可。
seajs.use(['$','dialog','accordion','slider'],function($,Dialog,Accordion,Slider){
    var dialog = new Dialog({
        trigger:'.blue',
        width:'450px',
        content:'<textarea style="width: 400px;height: 136px;resize:none;border:none;font-size: 12px;padding: 12px 15px;" placeholder="最多可以输入100个汉字"></textarea>',
        title:'添加批注'
    });
});

define(function(require){
    //设置变量，如果$与其他类库发生冲突，方便更换
    var $ = require('$');

    function Dialog(cfg){
        this.opt = $.extend({
            el:'.hello'
        },cfg);
        this.el = $(this.opt.el);
        this.trigger = $(cfg.trigger);
        this.width = cfg.width;
        this.content = cfg.content;
        this.title = cfg.title;
        this.init();
    }
    Dialog.prototype = {
        init:function(){
            this.bind();
        },
        bind:function(){
            var toolbar = this,
                document = $(document),
                window_el = $(window);
            this.trigger.delegate(document,'click',function(){
                var dialog = $('.dialog');
                toolbar.addDialogs();
                if(dialog.is(':visible')){
                    dialog.hide();
                }else {
                    dialog.show();
                }
            });
            window_el.bind('resize',function(){
                toolbar.onResize('.dialog');
            });
        },
        addDialogs:function(){
            var toolbar = this,
                width = this.width,
                content = this.content,
                dialog = $('.dialog'),
                header = $('.dialog .header'),
                title = $('.dialog .title'),
                body = $(document).find('body'),
                dialogHtml = '<div class="dialog"><div class="header clearfix"><h1 class="title">'+this.title+'</h1><a href="javascript:;" class="close" title="关闭"></a></div><div class="content"></div><div class="footer"><a href="javascript:;" class="confirm" title="确定">确定</a><a href="javascript:;" class="cancel" title="取消">取消</a></div>';
            if(dialog.length==0){
                body.append(dialogHtml);
                this.setCss();
                toolbar.onCenter('.dialog');
            }
            toolbar.hideDialog('.dialog');
        },
        setCss:function(){
            var dialog = $('.dialog'),
                header = $('.dialog .header'),
                content = $('.dialog .content');
            content.append(this.content);
            dialog.css('width',this.width);
            header.css('width','100%');
        },
        onCenter:function(el){
            var box = $(el),
                windowH = $(window).height(),
                windowW = $(window).width(),
                scrollT = $(document).scrollTop(),
                outerW = box.outerWidth(),
                outerH = box.outerHeight();
            box.css({
                position:'absolute',
                left:(windowW-outerW)/2+'px',
                top:(windowH-outerH)/2+scrollT+'px'
            });
        },
        onResize:function(el){
            var box = $(el),
                windowH = $(window).height(),
                windowW = $(window).width(),
                scrollT = $(document).scrollTop(),
                outerW = box.outerWidth(),
                outerH = box.outerHeight();
            box.css({
                position:'absolute',
                left:(windowW - outerW) / 2,
                top:(windowH - outerH) / 2 + scrollT
            });
        },
        hideDialog:function(dialog){
            var close = $('.close'),
                cancel = $('.cancel'),
                confirm = $('.confirm'),
                document = $(document),
                dialog_el = $(dialog);
            close.delegate(document,'click',function(){
                dialog_el.hide();
            });
            cancel.delegate(document,'click',function(){
                dialog_el.hide();
            });
            confirm.delegate(document,'click',function(){
                dialog_el.hide();
            })
        }
    };
    return function(cfg){
        return new Dialog(cfg);
    }
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>对话框</title>
    <link rel="stylesheet" href="css/dialog.css"/>
    <link rel="stylesheet" href="css/accordion.css"/>
    <link rel="stylesheet" href="css/slider.css"/>
    <script src="js/library/seajs/1.3.0/sea.js"></script>
    <script src="js/seajs-config.js"></script>
    <script src="js/module/dialog-mod.js"></script>
</head>
<body>
    <!--弹出框-->
    <div class="hello">1122</div>
    <div class="blue">blue</div>

</body>
</html>

/*reset*/
html{-webkit-text-size-adjust: none;}
html,body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}
ol,ul,li{margin:0; padding:0;list-style:none;}
textarea{resize: none; max-height:370px;}
img { border:none; }
em,i,s{ font-style:normal;}
a {text-decoration:none;color:#000;}
a:hover {text-decoration:none; 
.clearfix:after {content:'.';clear:both;display:block;visibility: hidden;height: 0;}
.clearfix {display: inline-block;}

/*content*/
.dialog {font-size: 14px;color: #fff;border:1px solid #fff;background: #8fc1da;}
.dialog .header {background-color: #6ea3c4;border-bottom: 1px solid #fff;height: 46px;}
.dialog .title {float:left;margin-top:12px;margin-left:15px;font-size: 14px;color: #fff;font-weight: normal;line-height: normal;}
.dialog .close {float:right;margin-top:12px;margin-right:15px;display:block;width:20px;height:20px;background-image: url(../img/close.png);background-repeat:  no-repeat;background-color: #6ea3c4;border:1px solid #fff;}
.dialog .close:hover {background-color: #f28a33;}
.dialog .content {text-align: center;}
.dialog .footer {height: 65px;text-align:center;}
.dialog .confirm , .dialog .cancel {display: inline-block;width: 78px;height: 23px;line-height:23px;border: 1px solid #fff;color: #fff;text-align:center;margin: 25px 0;}
.dialog .confirm {margin-right: 18px;background-color: #6ea3c4;}
.dialog .confirm:hover {background-color: #f28a33;}
.dialog .cancel:hover {background-color: #c3c8cb;}