jq 一些提示框插件

作者:LoveEmperor-王子様

(function( ) {  // xwzPlugin—confirm      //改button默认圆角 .alerts = {
alert: function(title, message, callback) {
if( title == null ) title = ‘Alert’;
$.alerts._show(title, message, null, ‘alert’, function(result) {
if( callback ) callback(result);
});
},

    greyAlert:  function(title,title2, message, message2, callback) {
    if( title == null ) title = 'greyAlert';
    $.alerts._show(title,title2, message, message2, null, 'greyAlert', function(result) {
        if( callback ) callback(result);
    });
    },

    confirm: function(title, message, callback) {
        if( title == null ) title = 'Confirm';
        $.alerts._show(title, message, null, 'confirm', function(result) {
            if( callback ) callback(result);
        });
    },
    GuideView: function(title, message, callback) {
        if( title == null ) title = 'GuideView';
        $.alerts._show(title, message, null, 'GuideView', function(result) {
            if( callback ) callback(result);
        });
    },
    LoadView: function(title,title2, message, message2,  callback) {
        if( title == null ) title = 'LoadView';
        $.alerts._show(title,title2, message, message2, null, 'LoadView', function(result) {
            if( callback ) callback(result);
        });
    },

    greyAlertBtn: function(title, message, callback) {
        if( title == null ) title = 'greyAlertBtn';
        $.alerts._show(title, message, null, 'greyAlertBtn', function(result) {
            if( callback ) callback(result);
        });
    },
    oneTxtAndbtn: function(title,title2, message, message2,callback) {
        if( title == null ) title = 'oneTxtAndbtn';
        $.alerts._show(title,title2, message, message2,null, 'oneTxtAndbtn', function(result) {
            if( callback ) callback(result);
        });
    },
    towTxtAndbtn: function(title,title2, message, message2,callback) {
        if( title == null ) title = 'towTxtAndbtn';
        $.alerts._show(title,title2, message, message2,null, 'towTxtAndbtn', function(result) {
            if( callback ) callback(result);
        });
    },

    _show: function(title,title2, message, message2, value, type, callback) {

        var _html = "";

        // _html += '<div id="xwz_box"></div><div id="xwz_con"><span id="xwz_tit">' + title + '</span>';
        // _html += '<div id="xwz_msg">' + msg + '</div><div id="xwz_btnbox">';
        // if (type == "alert") {
        //  _html += '<input id="xwz_btn_ok1" type="button" value="确定" />';
        // }
        // if (type == "confirm") {
        //  _html += '<input id="xwz_btn_ok" type="button" value="确定" />';
        //  _html += '<input id="xwz_btn_no" type="button" value="取消" />';
        // }else {
         //    _html += '<img id="xwz_jiantou" src="../resources/img/jiantou.png"/>';
         //    _html += '<span id="xwz_msg" >请点击右上角按钮,选择浏览器中打开</span>';
        // }
        // _html += '</div></div>';
        _html += '<div id="xwz_box"></div>';

        if (type == "alert") {
            _html += '<div id="xwz_con"><span id="xwz_tit">' + title + '</span>';
            _html += '<div id="xwz_msg">' + msg + '</div><div id="xwz_btnbox">';
            _html += '<button id="xwz_btn_ok1" type="button" >确定</button>';
            _html += '</div></div>';
        }
        if (type == "confirm") {
            console.log("ff");
            _html += '<div id="xwz_con"><span id="xwz_tit">' + title + '</span>';
            _html += '<div id="xwz_msg">' + msg + '</div><div id="xwz_btnbox">';
            _html += '<input id="xwz_btn_ok" type="button" value="确定" />';
            _html += '<input id="xwz_btn_no" type="button" value="取消" />';
            _html += '</div></div>';
        }else if (type == "GuideView"){
            _html += '<img id="xwz_jiantou" src="../resources/img/jiantou6.png"/>';
            _html += '<span id="xwz_jiantoumsg" >请点击右上角按钮,' +
                '<br>'+
                '选择浏览器中打开 ! </span>';
        }else if(type== "LoadView"){//#484848
            _html += '<div id="xwz_loadcell">';
            _html +='<div class="iLoader2"> ' +
                '  <img src="../../roadOutSide/resources/img/loading.gif" alt="" style="height: 2rem">' +
                '</div>';
            _html += '<div id="xwz_loadTitle"><span id="xwz_loadtit">' + title + '</span>';
            _html += '</div></div>';
        }else if (type== "greyAlert"){
            // _html += '<div id="xwz_con"><span id="xwz_greytit">' + title + '</span>';
            // _html += '<div id="xwz_msg">' + msg + '</div><div id="xwz_btnbox">';
            // _html += '<button id="xwz_greybtn_ok1" type="button" >我知道了</button>';
            // _html += '</div></div>';
            _html += '<div id="xwzloadcelss">';
            _html += '<div id="xwz_loadTitle2"><span id="xwz_loadtit2">' + title + '</span>'+'<span id="xwz_loadtit3">' + title2 + '</span>'+'<span id="xwz_loadtext2">' + message + '</span>'+'<span id="xwz_loadtext3">' + message2 + '</span>';
            _html += '<button id="xwz_greybtn_ok2" type="button" >我知道了</button>';
            _html += '</div></div>';
        } else if (type=="oneTxtAndbtn"){
            _html += '<div id="xwzloadcelss2">';
            _html += '<div id="xwz_loadTitle3"><span id="xwz_loadtit22">' + title + '</span>'+'<span id="xwz_loadtit3">' + title2 + '</span>'+'<span id="xwz_loadtext22">' + message + '</span>'+'<span id="xwz_loadtext3">' + message2 + '</span>';
            _html += '<button id="xwz_greybtn_ok3" type="button" >去支付</button>';
            _html += '</div></div>';
        }else if (type=="towTxtAndbtn"){
            _html += '<div id="xwzloadcelss2">';
            _html += '<div id="xwz_loadTitle3"><span id="xwz_loadtit22">' + title + '</span>'+'<span id="xwz_loadtit3">' + title2 + '</span>'+'<span id="xwz_loadtext22">' + message + '</span>'+'<span id="xwz_loadtext3">' + message2 + '</span>';
            _html += '<button id="xwz_greybtn_ok4" type="button" >取消</button>'+'<button id="xwz_greybtn_ok5" type="button" >去支付</button>';
            _html += '</div></div>';
        } else if (type== "greyAlertBtn"){
            // _html += '<div id="xwz_loadcel2">';
            // _html += '<div id="xwz_loadTitle2"><span id="xwz_loadtit2">' + title + '</span>';
            // _html += '<button id="xwz_greybtn_ok2" type="button" >我知道了</button>';
            // _html += '</div></div>';
        }


        //必须先将_html添加到body,再设置Css样式
        $("body").append(_html); GenerateCss();

        switch( type ) {
            case 'alert':

                $("#xwz_btn_ok1").click( function() {
                    $.alerts._hide();
                    callback(true);
                });
                $("#xwz_btn_ok1").focus().keypress( function(e) {
                    if( e.keyCode == 13 || e.keyCode == 27 ) $("#xwz_btn_ok").trigger('click');
                });
                break;
            case 'confirm':

                $("#xwz_btn_ok").click( function() {
                    $.alerts._hide();
                    if( callback ) callback(true);
                });
                $("#xwz_btn_no").click( function() {
                    $.alerts._hide();
                    if( callback ) callback(false);
                });
                $("#xwz_btn_no").focus();
                $("#xwz_btn_ok, #xwz_btn_no").keypress( function(e) {
                    if( e.keyCode == 13 ) $("#xwz_btn_ok").trigger('click');
                    if( e.keyCode == 27 ) $("#xwz_btn_no").trigger('click');
                });
                break;
            case 'GuideView':
                $("#xwz_jiantou").click( function() {
                    $.alerts._hide();
                    $("#xwz_jiantou").hide();
                    $("#xwz_jiantoumsg").hide();
                    callback(true);
                });
                $("#xwz_jiantoumsg").click( function() {
                    $.alerts._hide();
                    $("#xwz_jiantou").hide();
                    $("#xwz_jiantoumsg").hide();
                    callback(true);
                });
                break;
            case 'LoadView':
                break;
            case 'greyAlert':
                $("#xwz_greybtn_ok2").click( function() {
                    $.alerts._hide();
                    $("#xwz_box,#xwz_con").remove();
                    $("#xwzloadcelss").remove();$("#xwz_loadTitle2").remove();
                    $("#xwz_loadtit2").remove(); $("#xwz_loadtext2").remove();
                    $("#xwz_loadtit3").remove(); $("#xwz_loadtext3").remove();
                    $("#xwz_greybtn_ok2").remove();
                    if( callback ) callback(true);
                });
                break;
            case 'oneTxtAndbtn':
                $("#xwz_greybtn_ok3").click( function() {
                    $.alerts._hide();
                    $("#xwz_box,#xwz_con").remove();
                    $("#xwzloadcelss2").remove();
                    $("#xwz_loadTitle3").remove();
                    $("#xwz_loadtit22").remove();
                    $("#xwz_loadtext22").remove();
                    $("#xwz_loadtit33").remove();
                    $("#xwz_loadtext33").remove();
                    $("#xwz_greybtn_ok3").remove();
                    if (callback) callback(true);
                })
                break;
            case 'towTxtAndbtn':
                $("#xwz_greybtn_ok4").click( function() {
                    $.alerts._hide();
                    $("#xwz_box,#xwz_con").remove();
                    $("#xwzloadcelss2").remove();
                    $("#xwz_loadTitle3").remove();
                    $("#xwz_loadtit22").remove();
                    $("#xwz_loadtext22").remove();
                    $("#xwz_loadtit33").remove();
                    $("#xwz_loadtext33").remove();
                    $("#xwz_greybtn_ok4").remove();
                    $("#xwz_greybtn_ok5").remove();
                    if (callback) callback(false);
                });
                $("#xwz_greybtn_ok5").click( function() {
                    $.alerts._hide();
                    $("#xwz_box,#xwz_con").remove();
                    $("#xwzloadcelss2").remove();
                    $("#xwz_loadTitle3").remove();
                    $("#xwz_loadtit22").remove();
                    $("#xwz_loadtext22").remove();
                    $("#xwz_loadtit33").remove();
                    $("#xwz_loadtext33").remove();
                    $("#xwz_greybtn_ok4").remove();
                    $("#xwz_greybtn_ok5").remove();
                    if (callback) callback(true);
                })
                break;
            case 'greyAlertBtn':

                break;


        }
    },
    _hide: function() {
        $("#xwz_box,#xwz_con").remove();
    }
}
// Shortuct functions
xwzalert = function(title, message, callback) {
    $.alerts.alert(title, message, callback);
}

xwzconfirm = function(title, message, callback) {
    $.alerts.confirm(title, message, callback);
};

xwzGuide = function(title, message, callback) {
    $.alerts.GuideView(title, message, callback);
};
xwzLoad = function(title,title2, message, message2, callback) {
    $.alerts.LoadView(title,title2, message, message2,  callback);
};
xwzLoadHide =  function () {
    $("#xwz_box,#xwz_con").remove();
    $("#xwz_loadcell").remove();
};

xwzgreyAlert = function(title,title2, message, message2,callback) {
    $.alerts.greyAlert(title,title2, message, message2, callback);
};
xwzgreyAlertBtn = function(title, message, callback) {
    $.alerts.greyAlertBtn(title, message, callback);
};
xwzoneTxtAndbtn = function(title,title2, message,message2, callback) {
    $.alerts.oneTxtAndbtn(title,title2, message,message2, callback);
};
xwztowTxtAndbtn = function(title,title2, message,message2, callback) {
    $.alerts.towTxtAndbtn(title,title2, message,message2, callback);
};

//生成Css
var GenerateCss = function () {

    $("#xwz_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',
        filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.5'
    });

    $("#xwz_con").css({ zIndex: '999999', width: '55%', position: 'fixed',
        backgroundColor: 'White',fontSize:'0.7rem'
    });
    $("#xwz_tit").css({ display: 'block',  color: 'white', padding: '10px 15px',
        // backgroundColor: 'rgb(56,126,245)',
        backgroundColor: '#980065',fontSize:'0.6rem'
    //  borderBottom: '3px solid #009BFE',
    });

    $("#xwz_greycon").css({ zIndex: '999999', width: '55%', position: 'fixed',
        backgroundColor: 'White'
    });
    $("#xwz_greytit").css({ display: 'block', color: 'white', padding: '10px 10px',
        backgroundColor: '#980065',fontSize:'0.75rem'
        //  borderBottom: '3px solid #009BFE',
    });

    $("#xwz_loadcell").css({zIndex: '999999', width: '100%',height:'5rem', position: 'fixed',
        textAlign:'center', top:'40%'});

    $("#xwzloadcelss").css({zIndex: '999999', width: '100%',height:'10rem', position: 'fixed',
        textAlign:'center', top:'29%'});

    $("#xwzloadcelss2").css({zIndex: '999999', width: '100%',height:'10rem', position: 'fixed',
        textAlign:'center', top:'29%'});

    $("#xwz_loadTitle").css({ zIndex: '999999', width: '6rem',height:'6rem', position: 'fixed',
        backgroundColor: '#303030',textAlign:'center',borderRadius: '0.3rem',
        top:'40%',left:'6rem'
    });

    $("#xwz_loadTitle2").css({ zIndex: '999999', width: '10rem',height:'10rem', position: 'fixed',
        backgroundColor: '#5e5e5e',textAlign:'center',borderRadius: '0.3rem',
        top:'29%',left:'4.2rem'
    });

    $("#xwz_loadTitle3").css({ zIndex: '999999', width: '12rem',height:'8.5rem', position: 'fixed',
        backgroundColor: 'white',textAlign:'center',borderRadius: '0.3rem',
        top:'29%',left:'4.2rem'
    });

    $("#xwz_loadtit").css({ display: 'block',  color: 'white',
        backgroundColor: '#303030',
        float:'botton',botton:'1.5rem',borderRadius: '0.3rem',
        marginTop:'4rem',letterSpacing:'2px',fontSize:'0.6rem',fontFamily: 'SimSun'
        //  borderBottom: '3px solid #009BFE',
    });

    $("#xwz_loadtit2").css({ display: 'block',  color: 'white',
        backgroundColor: '#5e5e5e',
        float:'top',top:'1rem',borderRadius: '0.3rem',
        marginTop:'1rem',letterSpacing:'1px',fontSize:'0.8rem',fontFamily: 'SimSun'
        ,textAlign:'center'
        //  borderBottom: '3px solid #009BFE',
    });
    $("#xwz_loadtit22").css({ display: 'block',
        backgroundColor: 'whie',
        float:'top',top:'1rem',borderRadius: '0.3rem',
        marginTop:'1rem',letterSpacing:'1px',fontSize:'0.8rem',fontFamily: 'SimSun'
        ,textAlign:'center'
        //  borderBottom: '3px solid #009BFE',
    });
    $("#xwz_loadtit3").css({ display: 'block',  color: 'white',
        backgroundColor: '#5e5e5e',
        borderRadius: '0.3rem',
        marginTop:'0.1rem',letterSpacing:'1px',fontSize:'0.8rem',fontFamily: 'SimSun'
        ,textAlign:'center'
        //  borderBottom: '3px solid #009BFE',
    });
    $("#xwz_loadtit33").css({ display: 'block',
        backgroundColor: 'white',
        borderRadius: '0.3rem',
        marginTop:'0.1rem',letterSpacing:'1px',fontSize:'0.8rem',fontFamily: 'SimSun'
        ,textAlign:'center'
        //  borderBottom: '3px solid #009BFE',
    });

    $("#xwz_loadtext2").css({ display: 'block',  color: 'white',
        backgroundColor: '#5e5e5e',
        float:'top',top:'3.2rem',borderRadius: '0.3rem',marginTop:'0.8rem',
        fontSize:'0.6rem',fontFamily: 'SimSun',textAlign:'center'
        //  borderBottom: '3px solid #009BFE',
    });
    $("#xwz_loadtext22").css({ display: 'block',
        backgroundColor: 'white',
        float:'top',top:'4rem',borderRadius: '0.3rem',marginTop:'1rem',
        fontSize:'0.7rem',fontFamily: 'SimSun',textAlign:'center'
        //  borderBottom: '3px solid #009BFE',
    });
    $("#xwz_loadtext3").css({ display: 'block',  color: 'white',
        backgroundColor: '#5e5e5e',
        borderRadius: '0.3rem',
        marginTop:'0.1rem',fontSize:'0.6rem',fontFamily: 'SimSun',textAlign:'center'
        //  borderBottom: '3px solid #009BFE'
    });
    $("#xwz_loadtext33").css({ display: 'block',
        backgroundColor: 'white',
        borderRadius: '0.3rem',
        marginTop:'0.1rem',fontSize:'0.6rem',fontFamily: 'SimSun',textAlign:'center'
        //  borderBottom: '3px solid #009BFE'
    });

    $("#xwz_msg").css({ padding: '20px', lineHeight: '20px',fontSize:'0.6rem'
         // fontSize: '13px'
    //  borderBottom: '1px dashed #DDD',
    });

    $("#xwz_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px',
        border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',
        lineHeight: '16px', cursor: 'pointer',  fontFamily: '微软雅黑'
    });

    $("#xwz_btnbox").css({  textAlign: 'center' });
    $("#xwz_btn_ok1").css({width: '100%', height: '35px', color: 'white', border: 'none',backgroundColor: "rgba(56,126,245,0.9)" });
    $("#xwz_greybtn_ok1").css({width: '100%', height: '35px', color: 'white', border: 'none',backgroundColor: "rgba(152,0,101,0.6)" });
    $("#xwz_greybtn_ok2").css({width: '80%', height: '35px', color: 'white', border: 'none',backgroundColor: "rgba(152,0,101,0.6)" ,float:'botton',botton:'1.5rem',marginTop:'1.5rem'});
    $("#xwz_greybtn_ok3").css({width: '80%', height: '35px', color: 'white', border: 'none',backgroundColor: "#980065" ,float:'botton',botton:'1.5rem',marginTop:'1.5rem'});
    $("#xwz_greybtn_ok4").css({width: '38%', height: '35px', color: 'white', border: 'none',backgroundColor: "#980065" ,float:'botton',botton:'1.5rem',marginTop:'1.5rem',float:'left',marginLeft:'0.5rem'});
    $("#xwz_greybtn_ok5").css({width: '38%', height: '35px', color: 'white', border: 'none',backgroundColor: "#980065" ,float:'botton',botton:'1.5rem',marginTop:'1.5rem',float:'right',marginRight:'0.5rem'});
    $("#xwz_btn_ok,#xwz_btn_no").css({ width: '50%', height: '30px', color: 'white', border: 'none' });
    $("#xwz_btn_ok").css({ backgroundColor: "rgba(56,126,245,0.9)" });
    $("#xwz_btn_no").css({ backgroundColor: "rgba(50,205,94,0.9)"});
    // true #387EF5
    // false rgba(50,205,94,0.79)

    $("#xwz_jiantou").css({width:'100px',height:'50px',float:'right',zIndex:'1000000',top:'20px',position: 'fixed',right:'20px'});
    $("#xwz_jiantoumsg").css({width:'150px',height:'50px',textAlign:'center',color:"white",fontSize:'15px',zIndex:'1000000',top:'100px',position: 'fixed',right:'20px'});

$(".iLoader2").css({zIndex: '9999999',position: 'absolute',width:'100%',height:'2rem',left:'0',top:'22%',textAlign: 'center',overflow: 'hidden'});
    //右上角关闭按钮hover样式
    $("#xwz_ico").hover(function () {
        $(this).css({ backgroundColor: 'Red', color: 'White' });
    }, function () {
        $(this).css({ backgroundColor: '#DDD', color: 'black' });
    });

    var _widht = document.documentElement.clientWidth; //屏幕宽
    var _height = document.documentElement.clientHeight; //屏幕高

    var boxWidth = $("#xwz_con").width();
    var boxHeight = $("#xwz_con").height();

    var boxWidth = $("#xwzloadcelss").width();
    var boxHeight = $("#xwzloadcelss").height();

    var boxWidth = $("#xwzloadcelss2").width();
    var boxHeight = $("#xwzloadcelss2").height();
    var boxHeight = $("#xwz_loadTitle3").height();
    var boxWidth = $("#xwz_loadTitle3").width();

    //让提示框居中
    $("#xwz_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
    $("#xwzloadcelss").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
    $("#xwzloadcelss2").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
    $("#xwz_loadTitle3").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
}

})(jQuery);

猜你喜欢

转载自blog.csdn.net/qq_31424825/article/details/80481549