弹出对话框层提示插件

一款是用原生javascript写的第一款插件原创弹出对话框层提示插件mh_dialog_v1，后续会不断完善，大家可以去看一下哦，注释写得非常的详细。。。

分类：悬浮层/弹出层 > 弹窗难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面引入插件文件

<script type="text/javascript" src="mh_dialog/js/mh_dialog.js"></script>

页面想怎么调用就怎么调用，就是那么任性

<a class="a" href="javascript:mh_dialogShow('mh_success','更新成功!');">提示更新成功</a>
<a class="a" href="javascript:mh_dialogShow('mh_loading','内容加载!');">提示内容加载</a>
<a class="a" href="javascript:mh_dialogShow('mh_warning','输入有误!');">提示输入有误</a>
<a class="a" href="javascript:mh_dialogShow('mh_error','更新失败!');">提示更新失败</a>
<a class="a" href="javascript:mh_dialogShow('mh_success','更新成功!',2,true);">提示更新成功2秒后自动关闭</a>
<a class="a" href="javascript:mh_dialogShow('mh_loading','内容加载!',2,true);">提示内容加载2秒后自动关闭</a>
<a class="a" href="javascript:mh_dialogShow('mh_warning','输入有误!',2,true);">提示输入有误2秒后自动关闭</a>
<a class="a" href="javascript:mh_dialogShow('mh_error','更新失败!',2,true);">提示更新失败2秒后自动关闭</a>
<a class="a" href="javascript:mh_dialogShow('mh_success','更新成功!',2,true,'http://www.jq-school.com');">提示更新成功2秒后自动关闭后跳转url</a>
<a class="a" href="javascript:mh_dialogShow('mh_loading','内容加载!',2,true,'http://www.jq-school.com');">提示内容加载2秒后自动关闭后跳转url</a>
<a class="a" href="javascript:mh_dialogShow('mh_warning','输入有误!',2,true,'http://www.jq-school.com');">提示输入有误2秒后自动关闭后跳转url</a>
<a class="a" href="javascript:mh_dialogShow('mh_error','更新失败!',2,true,'http://www.jq-school.com');">提示更新失败2秒后自动关闭后跳转url</a>

页面加载时创建遮罩层和对话框层

/**
 * @Description 页面加载时创建遮罩层和对话框层
 * @author temdy
 * @Date 2015-05-14
 */
window.onload=function(){
    var cssText = "插件样式内容";
    //初始化插件样式
    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 动态创建遮罩层和对话框层的样式
 * @author temdy
 * @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 弹出对话框层
 * @author temdy
 * @Date 2015-05-14
 * @param className 样式名称（成功：mh_success，失败：mh_error，加载：mh_loading，警告：mh_warning）
 * @param content 提示内容
 * @param timeout 定时关闭时间
 * @param flag 是否自动关闭
 * @param url 对话框关闭时跳转的url
 * @return
 */
function mh_dialogShow(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 关闭对话框层
 * @author temdy
 * @Date 2015-05-14
 * @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;
    }
}