【js+jquery】通用、簡單的JS 提示框

1、該插件不需要依賴 jquery，僅僅使用了原生js

2、簡單、通用、可自定義修改樣式、支持等待N秒消失、支持消失后跳轉其他url ， 功能還是比較完善的。

3、不廢話，上代碼： （我存放的位置在 /Public/plugins/mh_dialog/   下，分別存放js 和 image ）。

js：

/**
 * 名稱：漫畫原創彈出對話框提示層插件mh_dialog
 * 日期：2015-05-14
 */

var mh_timer;
/**
 * @Description 頁面加載時創建遮罩層和對話框層
 * @Date 2015-05-14
 */
window.onload=function(){
    //cssText2 遮罩效果,
    var cssText2 = "html,body{width:100%;height:100%;margin:0;padding:0;}#mh_layer{background-color:#000;position:fixed;left:0;top:0;width:100%;height:100%;z-index:999999;display:none;background-color:rgba(0,0,0,0.6);}#mh_dialog{width:220px;height:100px;text-align:center;border-radius:8px;position:fixed;left:50%;top:30%;margin-left:-106px;margin-top:-56px;z-index:10000000;background-color:#fff;background-repeat:no-repeat;line-height:150px;font-weight:bold;display:none;letter-spacing:2px;}.success{background-image:url('/Public/plugins/mh_dialog/images/success.png');color:#1fce11;background-size:32px 32px;background-position:center 20px;border:6px #1fce11 solid;}.loading{background-image:url('/Public/plugins/mh_dialog/images/loading.gif');color:#333333;background-size:50px 50px;background-position:center 15px;border:6px #333333 solid;}.warning{background-image:url('/Public/plugins/mh_dialog/images/warning.png');color:#F90;background-size:32px 32px;background-position:center 20px;border:6px #F90 solid;}.error{background-image:url('/Public/plugins/mh_dialog/images/error.png');color:#F00;background-size:32px 32px;background-position:center 20px;border:6px #F00 solid;}";
    var cssText = "html,body{width:100%;height:100%;margin:0;padding:0;}#mh_layer{background-color:#000;position:fixed;left:0;top:0;width:100%;z-index:999999;display:none;background-color:rgba(0,0,0,0.6);}#mh_dialog{width:220px;height:100px;text-align:center;border-radius:8px;position:fixed;left:50%;top:30%;margin-left:-106px;margin-top:-56px;z-index:10000000;background-color:#fff;background-repeat:no-repeat;line-height:150px;font-weight:bold;display:none;letter-spacing:2px;}.success{background-image:url('/Public/plugins/mh_dialog/images/success.png');color:#1fce11;background-size:32px 32px;background-position:center 20px;border:6px #1fce11 solid;}.loading{background-image:url('/Public/plugins/mh_dialog/images/loading.gif');color:#333333;background-size:50px 50px;background-position:center 15px;border:6px #333333 solid;}.warning{background-image:url('/Public/plugins/mh_dialog/images/warning.png');color:#F90;background-size:32px 32px;background-position:center 20px;border:6px #F90 solid;}.error{background-image:url('/Public/plugins/mh_dialog/images/error.png');color:#F00;background-size:32px 32px;background-position:center 20px;border:6px #F00 solid;}";
    //初始化插件樣式
    createStyle(cssText);
    //創建遮罩層
    var mh_layer_div = document.createElement("div"); 
    mh_layer_div.setAttribute("id","mh_layer"); 
    document.body.appendChild(mh_layer_div); 
    //創建對話框層
    var mh_dialog_div = document.createElement("div"); 
    mh_dialog_div.setAttribute("id","mh_dialog"); 
    document.body.appendChild(mh_dialog_div); 
}

/**
 * @Description 動態創建遮罩層和對話框層的樣式
 * @Date 2015-05-14
 */
function createStyle(content){
    //創建樣式節點
    var style=document.createElement("style");
    style.setAttribute("type", "text/css");
    if(style.styleSheet){// IE
        style.styleSheet.cssText = content;
    } else {// w3c
        var cssText = document.createTextNode(content);
        style.appendChild(cssText);
    }
    //獲取頭部標簽對象
    var heads = document.getElementsByTagName("head");
    if(heads.length){
        heads[0].appendChild(style);
    }else{
        document.documentElement.appendChild(style);
    }
}


/**
 * @Description 彈出對話框層
 * @param className 樣式名稱（成功：success，失敗：error，加載：loading，警告：warning）
 * @param content 提示內容
 * @param timeout 定時關閉時間
 * @param flag 是否自動關閉
 * @param url 對話框關閉時跳轉的url 
 * @return
 */
function showDialog(className,content,timeout,flag,url){
    //獲取遮罩層對象
    var mh_layer = document.getElementById("mh_layer");
    //獲取對話框層對象
    var mh_dialog = document.getElementById("mh_dialog");
    timeout = timeout || 3;
    flag = flag || false;
    url = url || "";
    mh_dialog.className = className;
    mh_dialog.innerHTML = content;
    mh_dialog.style.display = "block";
    mh_layer.style.display = "block";
    if(flag){
        mh_timer = window.setInterval(function(){
            mh_dialogClose(url);
            window.clearInterval(mh_timer);
        },timeout*1000);
    }
}

/**
 * @Description 關閉對話框層
 * @param url 關閉層時跳轉的url
 * @return
 */
function mh_dialogClose(url){
    //獲取遮罩層對象
    var mh_layer = document.getElementById("mh_layer");
    //獲取對話框層對象
    var mh_dialog = document.getElementById("mh_dialog");
    url = url || "";
    mh_dialog.style.display = "none";
    mh_layer.style.display = "none";
    if(url!=""){
        window.location.href = url;
    }
}

 

 

2、html使用：

引入該插件js：

<!-- js通用提示框 -->
    <script type="text/javascript" src="/Public/plugins/mh_dialog/js/mh_dialog.js"></script>

頁面提示：

//提示成功，且跳轉至QQ互聯
        showDialog('success','恭喜您，提交成功!',2,true,"tencent://message/?uin={$companyMessage['kefu_qq']}&Site=http://vps.shuidazhe.com&Menu=yes");
        

 

3、效果：