国产视频app我在制作網頁編寫腳本的時候,少不了利對alert()方法來彈出各式各樣的信息,但是不同廠家發布的瀏覽器對alert彈出框的樣式是不同的,有的瀏覽器的彈出框非常的好的,而有的瀏覽器彈出框的樣式慘不忍堵,今天由于把YT用戶中心(百描)插件的彈出框美化了一下,并把代碼發布出來,以后備用。

alert()美化的原理

1、我們構建一個函數,并可以傳入變量

国产视频app2、制作彈出層,彈出信息

3、美化彈出層

4、添加點擊事件到里面去

具體代碼,可在下面的附件下載中下載!

代碼如下:

function g_alert(type,cont,url){
       //定義彈出層
    var html = '<div id="g_box" style="z-index:9999; position:fixed"><div id="g_title">提示</div><div id="g_cont"><img width="50px" height="50px" style="vertical-align: middle;"><span id="g_msg">'+cont+'</span></div><div id="g_buttom"><div id="g_button"><a class="butt" id="ok">確定</a> <a class="butt" id="false">取消</a></div></div></div>';
    var html2 ='<div id="g_box2"style="z-index:9999; position:fixed" class="g_cont"><img width="25px" height="25px" style="vertical-align: middle;"><span id="g_msg" style="margin-left: 10px;font-size: 16px;height: 25px;line-height: 25px;vertical-align: middle;: block">'+cont+'</span></div>';
    //定義CSS
    var css = "<style id='g_css'>#g_title{height:60px;background:#fff;border-radius:10px 10px 0 0; border-bottom:1px solid #eef0f1;line-height:60px;padding-left:25px;font-size:18px; font-weight:700; color:#535e66}";
    css += "#g_cont{padding:30px 0; text-align:center;}";
    css += "#g_msg{font-size:16px;margin-left:20px;}";
    css += "#g_buttom{height:60px;border-top:1px solid #eef0f1; border-radius:0 0 10px 10px;line-height:60px;}";
    css += "#g_button{width:200px; height:100%; margin-right:10px; float:right;}";
    css += ".butt{display:block;margin-top:12px;cursor:pointer; float:left;width:95px;height:35px;line-height:35px;text-align:center;color:#fff;border-radius:5px;}"
    css += "#ok{background:#0095d9; float:right;}";
    css += "#false{background:#546a79; float:left;}";
    css +=".g_cont{padding:10px 20px;;border-radius:10px;;text-align:center;border: 1px solid #bbb;background:#fff;}";
    css += "#g_box{width:550px;border:1px solid #bbb;border-radius:10px;background:#fff;}</style>";   
    //插入CSS 
    $('head').append(css);
    //正角提示
    if(type == 'success'){
        $('body').append(html);
        $('#g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/ok.png');
        $('#false').hide();
    }
    //錯誤提示
    if(type == 'error'){
        $('body').append(html);
        $('#g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/fail.png');
        $('#false').hide();
    }
    //警告提示
    if(type == 'warn'){
        $('body').append(html);
        $('#g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/warn.png');
        $('#false').hide();
    }
    //詢問提示
    if(type == 'confirm'){
        $('body').append(html);
        $('#g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/confirm.png');
    }
    //正確提示,沒有事件,3秒后消失
    if(type == 'skipok'){
        $('body').append(html2);
        $('.g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/sok.png');
        setTimeout(removediv, 3000);
    }
    //錯誤提示,沒有事件,3秒后消失
    if(type == 'skipwarn'){
        $('body').append(html2);
        $('.g_cont img').attr('src',bloghost+'zb_users/plugin/YtUser/js/images/swarn.png');
        setTimeout(removediv, 3000);
    }
    //彈出層消失函數
    function removediv(){
        $('#g_all').remove();
        $('#g_box').remove();
        $('#g_css').remove();
        $('#g_box2').remove();
        return false;
    }
    //確定按鈕事件
    $('#ok').click(function(){
        removediv();
        if(url){
            window.location = url;
        }
        return true;
    });
    //取消按鈕事件
    $('#false').click(function(){
        removediv();
        if(type != 'confirm'){
        if(url){
            window.location = url;
        }}
        return false;
    });
    //定位彈出層在窗口的位置
    var _widht = document.documentElement.clientWidth;
    var _height = document.documentElement.clientHeight; 
    var boxWidth = $("#g_box").width();
    var boxHeight = $("#g_box").height();
    var boxWidth2 = $("#g_box2").width();
    var boxHeight2 = $("#g_box2").height();
     $("#g_box").css({ top: (_height - boxHeight) / 4 + "px", left: (_widht - boxWidth) / 2 + "px" });
     $("#g_box2").css({ top: (_height - boxHeight2) / 2 + "px", left: (_widht - boxWidth2) / 2 + "px" });
  }

国产视频app我這里不發圖標了,各位自己制作即可,或在一些素材網站進行下載

alert()美化的調用方法方法

代碼:

g_alert(''錯誤類型,'提示內容','事件跳轉網址可選');

注:

1、URL地址只在確定事件才會生效

2、skipok,skipwarn事件,不可調用地址

以下為演示圖片:

利用JQ來美化Js的alert彈出框

錯誤演示

利用JQ來美化Js的alert彈出框

正確演示

js alert美化插件源碼,帶說明平臺 : 所有平臺  |  分類 : 編程開發  |  大小 : 0.26 MB

注:代碼來源網絡,經過二次修改開發,測試正常!