hello，大家好，我是JquerySchool的站长漫画，好久没有写插件分享给大家用了，以前分享的是jquery插件，现在用原生javascript多一点，所以开始用原生的javascript写一些插件分享给大家用，今天分享的一款是用原生javascript写的第一款插件原创弹出对话框层提示插件mh_dialog_v1，后续会不断完善，大家可以去看一下哦，注释写得非常的详细。。。
。。。
废话就不多说了，直接转入正题，哈哈哈哈。。。。
主要function如下：
1、页面加载时创建遮罩层和对话框层
/**
* @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);
}
2、动态创建遮罩层和对话框层的样式
/**
* @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);
}
}
3、弹出对话框层
/**
* @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);
}
}
4、关闭对话框层
/**
* @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;
}
}
用法
步骤1：
把mh_dialog的文件夹放到项目根目录
步骤2：
页面引入插件文件
<script type="text/javascript" src="mh_dialog/js/mh_dialog.js"></script>
步骤3：
页面想怎么调用就怎么调用，就是酱紫任性
<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>
效果如下：
虽然我滴功能很简单，但很实用哦。。。
如果您觉得本作品对您的学习有所帮助：
关键字：
mh_dialog 弹出层 提示插件 javascript js特效