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、效果:

【js+jquery】通用、简单的JS 提示框的更多相关文章

  1. js+jquery手写弹出提示框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. jquery 实现一个简单的成功提示框,失败提示框

    主要的jquery代码:var TS={ successAlert:function(str){ //调用成功的方法 var html='<div class="alert alert ...

  3. jQuery EasyUI 教程-Tooltip(提示框)

    <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta c ...

  4. jquery删除记录弹出提示框

    来自于<jquery权威指南> ------------------- 点击删除时,弹出提示框,并做相应的删除确定或取消 完整代码如下: <!DOCTYPE html PUBLIC ...

  5. 基于jQuery实现简单的js模块化

    在多人合作完成网页,经常遇到大家的js代码相互影响的问题.现在有许多模块化的前端框架,应该是可以解决这个问题.但本人并非前端开发人员,那些框架都没用过,只对jQuery相对熟悉,就想用jQuery来解 ...

  6. Epii.js 一个极其简单的Js模板引擎

    Epii.js 简约而不简单的Js模板引擎 Epii.js 简约而不简单的JavaScript模板引擎 # 特性 一个轻量级模板引擎,可快速实现数据与ui绑定(数据变动,UI自动变动),快速实现事件绑 ...

  7. Angular js 之一些简单的js操作

    1.<div ng-if()> </div> 括号里面是布尔值  如果是false那么你ng-if的那个dom就会不显示.(感觉这是angular js中最给力的一点) 一般会 ...

  8. jquery实现简单的弹出框

    弹出框本身是一个div,默认是隐藏不展示的,在需要弹框的时候使其显示,并浮在当前页面之上 弹框样式: .tanchuang { width: 100%; height: 100%; display: ...

  9. 用CSS和jQuery制作简单的下拉框

    请选择 百度 谷歌 雅虎 新浪 dowebok 代码 素材 模板 教程 示例下载 // li', function() { var parent = $(this).closest('.select' ...

  10. 使用vue自定义简单的消息提示框

    <style scoped> /** 弹窗动画*/ a { text-decoration: none } .drop-enter-active { /* 动画进入过程:0.5s */ t ...

随机推荐

  1. boost并发编程boost::atomic

    三个用于并发编程的组件: atomic,thread,asio(用于同步和异步io操作)   atomic atomic,封装了不同计算机硬件的底层操作原语,提供了跨平台的原子操作功能,解决并发竞争读 ...

  2. 关于微软C#中的CHART图表控件的简单使用【转】

    最近公司项目要用到Chart图表控件,这是一个比较老的东西了,目前网络上似乎已经不太流行这个控件,但是只要配置了相关的属性,效果还是可以的.前前后后摸索了好久,接下来谈谈这个件控件最重要的几个属性. ...

  3. Deformable Convolutional Networks-v1-v2(可变形卷积网络)

    如何评价 MSRA 视觉组最新提出的 Deformable ConvNets V2? <Deformable Convolutional Networks>是一篇2017年Microsof ...

  4. Swift语言从天而降,是否能掀起新一轮的科技革命?

    Swift语言从天而降,是否能掀起新一轮的科技革命? Swift语言诞生到如今,才短短一个月多,Swift居然挤进TIOBE排行榜的第16位,相信这发展的速度绝不是不论什么一个语言可与之相提并论,那S ...

  5. JS滚轮事件onmousewheel

    典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件.在大多数浏览器(IE6, IE7, IE8, Opera 10+, S ...

  6. 深度学习哪家强?吴恩达、Udacity和Fast.ai的课程我们替你分析好了

    http://www.jianshu.com/p/28f5473c66a3 翻译 | AI科技大本营(rgznai100) 参与 | reason_W 引言 过去2年,我一直积极专注于深度学习领域.我 ...

  7. OpenGL ES 3.0之Texturing纹理详解(一)

    本文流程 1.Texturing基础 2.装载Texturing和mipmapping 3.纹理过滤和包装 4.Texture level-of-detail, swizzles, and depth ...

  8. 【python】insertDB1.02

    #------------------------------------------------------------------------------------ # insertDB1.02 ...

  9. Python连接MySQL的实例代码

    Python连接MySQL的实例代码   MySQLdb下载地址:http://sourceforge.net/projects/mysql-python/ 下载解压缩后放到%Python_HOME% ...

  10. javascript 替换 window.onload 的 document.ready

    通常我们想要在页面内容加载完成后运行 JS 时,都会使用 window.onload 来处理,比如: window.onload = function(){      alert('Hello Wor ...