jq 一些提示框插件

冷不防 2022-05-24 13:29 280阅读 0赞

--------------------

作者：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);