基础组件之提示框

HTML

<div style="text-align:center;padding:50px; margin:100px;">
        <button class="btn">弹出对话框</button>
        <button class="btn1">弹框</button>
        <button class="btn">弹出话框</button>
    </div>

css

.mBox *{padding: 0;margin: 0;font-size: 14px; font-family: '微软雅黑'}
.mBox button{cursor:pointer;background:transparent;border:none;outline:none;line-height:inherit;font-size:inherit;border-radius:5px}
.mBoxMask,.mBoxMain{position:fixed;z-index:999999999;}
.mBoxMask{top:0;left:0;right:0;bottom:0;background:transparent;}
.mBoxMaskApacity{background:#000;filter:alpha(opacity=0);opacity:0;}
.mBoxMain{background-color:#fff;border-radius:5px;filter:alpha(opacity=0);opacity:0;padding-bottom:20px; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; }
.mBoxDialog{top:50%;left:50%;box-shadow: 0 0 3px 1px #999;}
.mBoxPrompt{border:1px solid #ddd;position: absolute;}
.mBoxTitle{line-height:40px;background:#aac81a;padding:0 10px;font-size:16px;overflow:hidden;color:#fff;border-radius:5px 5px 0 0}
.mBoxClose{color:#fff;float:right;font-size:20px;padding:0 5px}
.mBoxClose:hover{color:#f00;}
.mBoxContent{min-height:50px;padding:20px;}
.mBoxBtns,.mBoxContent{text-align:center;}
.mBoxBtns .mBoxSure,.mBoxBtns .mBoxCancel{padding:10px;min-width:80px;margin:0 10px;background:#a0a0a0;color:#fff}
.mBoxBtns .mBoxSure{background:#aac81a}
.mBoxBtns .mBoxSure:hover{background:#91aa17}
.mBoxBtns .mBoxCancel:hover{background:#888}

.mBoxIcon{position:absolute;top:-13px;left:50%;font-size:32px;margin-left:-10px;width:20px;height:16px;line-height:16px;color:#ddd}
.mBoxIcon:before{content:'\25b2';position:absolute;left:2px;top:-1px;font-size:15px;color:#fff;}

js调用部分

Mbox($('.btn'),{
        'mWidth' : 300,
        //'mHeight' : 150,
        'mTitle' : '弹框提示',
        'mStr' : '弹出对话框',
        'mType' : 0
    },function(){
        console.log("sure");
    },function(){
        console.log('cancel');
    });

Mbox($('.btn1'),{
        'mWidth' : 250,
        'mHeight' : 150,
        'mTitle' : '弹框提示1',
        'mStr' : '<span>弹出对话框1</span><input id="txt1" type="text">',
        'mType' : 1
    },function(){

        console.log("sure1",$('#txt1').val());
    });

js组件部分(第一版 简单的两种弹框)

var Mbox = function(_obj,_json,sureFn,cancelFn){
    if ( window == this ) return new Mbox(_obj,_json,sureFn,cancelFn);
    this.mObj = null;//当前被点击对象
    this.mDefault = {
        mWidth : 500,//框的宽度
        mHeight : null,//框的高度
        mTitle : '对话框',//标题
        mStr : '',//要显示的内容
        mType : 0,//0对话框,1、提示框 ,2、hover提示框(暂时没有)
        //mPoint : 'top',//箭头方向,
    };
    this.sureFn = sureFn || null;//确定回调函数
    this.cancelFn = cancelFn || null;//取消回调函数

    return this.init(_obj,_json);

};

Mbox.fn = Mbox.prototype;

Mbox.fn.addCss = function(){
    var cssStr = '';

    $('head').append('<style type="text/css">' + cssStr + '</style>');
};

    //对话框HTML
Mbox.fn.dialogHtml = function(){
    var str = '<div class="mBoxMain mBoxDialog" style="'
                + 'width:' + this.mDefault.mWidth + 'px;'
                + 'height:' + this.mDefault.mHeight + 'px;'
                + 'margin:-' + this.mDefault.mHeight/2 + 'px 0 0 -' + this.mDefault.mWidth/2 + 'px">'
            + '<div class="mBoxTitle">'
            + ' <button class="mBoxClose" type="button">&#10006;</button>'
            + ' <span>' + this.mDefault.mTitle + '</span>'
            + '</div>';

    return str;
};

    //提示框HTML
Mbox.fn.promptHtml = function(){
    //要先获取位置信息
    var mObjInfo = {
        t : this.mObj.offset().top,
        l : this.mObj.offset().left,
        w : this.mObj.outerWidth(),
        h : this.mObj.outerHeight()
    };
    
    var str = '<div class="mBoxMain mBoxPrompt" style="'
                + 'width:'+ this.mDefault.mWidth +'px;'
                + 'height:'+ this.mDefault.mHeight +'px;'
                + 'top:'+ (mObjInfo.t + mObjInfo.h + 20) +'px;'
                + 'left:'+ (mObjInfo.l + mObjInfo.w/2) +'px;'
                + 'margin-left:-'+ this.mDefault.mWidth/2 +'px;">'
            + '<span class="mBoxIcon">&#x25b3;</span>';

    return str;
};

    //添加html
Mbox.fn.addMbox = function(){
    //保证只有一个弹框
    if(!!$('.mBox')[0]) return false;

    var self = this;
    var mHtml = '<div class="mBox">'
                + ' <div class="mBoxMask"></div>';

        switch(self.mDefault.mType){
            case 0:
                mHtml += self.dialogHtml();
                break;
            case 1:
                mHtml += self.promptHtml();
                break;
            default : break;
        };

        mHtml += '     <div class="mBoxContent">' + self.mDefault.mStr + '</div>'
                + '     <div class="mBoxBtns">'
                + '         <button class="mBoxSure" type="button">确定</button>'
                + '         <button class="mBoxCancel" type="button">取消</button>'
                + '     </div>'
                + ' </div>'
                + '</div>';

    $('body').append(mHtml);
    //修正对话框位置  偏上50px
    if(!self.mDefault.mHeight && !!$('.mBoxDialog')[0]){
        $('.mBoxDialog').css('margin-top',-$('.mBoxDialog').height()/2-50);
    };
    $('.mBoxMain').animate({'opacity':1},self.events());
};

    //移除
Mbox.fn.removemBox = function(){
    $('.mBoxMain').animate({'opacity':0},function(){
        $('.mBox').remove();
    });
};

    //事件绑定
Mbox.fn.events = function(){
    //移除mBox
    $('.mBoxMask,.mBoxBtns button,.mBoxClose').click(this.removemBox);
    //确定回调
    if(this.sureFn){
        $('.mBoxSure').click(this.sureFn);
    }
    //取消回调
    if(this.cancelFn){
        $('.mBoxCancel').click(this.cancelFn);
    }
};

    //初始化
Mbox.fn.init = function(_obj,_json){
    var self = this;
    $.extend(self.mDefault,_json);

    _obj.click(function(){
        self.mObj = $(this) || null;
        self.addCss();
        self.addMbox();
    });
};


你可能感兴趣的:(js,jquery,组件,对话框)