点击HTML页面问号出现提示框

本demo的功能：点击页面按钮在其边缘出现提示信息，点击页面任何一处则消失。

如下图：

1.所需插件：

jquery插件；
layer插件；

2.HTML内容：

注意：

class="j-help-tips"这个class是核心，不可缺少。
data-tips属性是必须的。
data-tips属性中：type："1"不用修改；
data-tips属性中：txt内容即是要提示的内容。

<html>

	<head>

		<link rel="stylesheet" href="style.css"" type="text/css" />

	</head>

	<body>

		<div style="margin-top: 10%; margin-left: 10%;">

			<span class="testSpan">

				<i class="edi-icon j-help-tips" data-tips='{"type":"1","txt":"提示内容111..."}'>①</i>

			</span>

			<span style="margin: 30px;">

				<i class="edi-icon j-help-tips" data-tips='{"type":"1","txt":"提示内容222..."}'>②</i>

			</span>

			<span style="margin: 30px;">

				<i class="edi-icon j-help-tips" data-tips='{"type":"1","txt":"提示内容333..."}'>③</i>

			</span>

		</div>

	</body>

	<!-- jquery -->

	<script src="http://code.jquery.com/jquery-latest.js"></script>

	<!-- layer -->

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

	<!-- 提示插件 -->

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

	<script>

		$(function(){

			<!-- 页面初始化加载 -->

			var tips = new helpTips().init();

		})

	</script>

</html>

3.css内容：（非必要）

本demo的css非必须，不影响功能；

.edi-icon {

    font-size: 18px;

    font-style: normal;

    -webkit-font-smoothing: antialiased;

    -webkit-text-stroke-width: .2px;

    -moz-osx-font-smoothing: grayscale;

    *display: inline;

    *zoom: 1;

    cursor: pointer;

}

4.javascript内容：（核心）

//定义提示弹出框；

var helpTipsLayer;

//定义弹出框的默认设置；

function helpTips(t) {

	this.options = {},

	this.options.elem = ".j-help-tips", //与页面class相对应；

	this.options.type = 1,

	this.options.color = "#8db3d7",

	this.options.time = 0, //设置0是提示弹出框不会自动消失；可设置为其他数字，以毫秒为单位；

	this.options.titleEnd = "录入提示",

	this.options.width = "600px",

	this.options.height = "",

	this.options.imgWidth = "233",

	this.options.imgHeight = "375",

	"undefined" != typeof t && (this.options = $.extend({}, this.options, t)),

	this.elemObj = $(this.options.elem)

}

!

function() {

    //点击页面任何一处可使提示弹出框消失；

	$(document).on("click", function(event){

		var e = event || window.event;

		var target = e.target || e.srcElement;

		var flag = $(target).hasClass("j-help-tips");

		if(helpTipsLayer && !flag){

			layer.close(helpTipsLayer);

		}

	})

}(), helpTips.prototype = {

	constructor : helpTips,

	init : function() {

		this.bindEvent()

	},

	bindEvent : function() {

		var t = this;

		t.elemObj.on("click", function() {

			layer.close(helpTipsLayer);//点击其他任意的提示框按钮，则关闭上一个提示框。

			var i = $(this),

				o = i.data("tips");

			if ("undefined" != typeof o && "undefined" != typeof o.type && 1 == o.type) {

				"undefined" != typeof o && "undefined" != typeof o.txt ? helpTipsLayer = layer.tips(o.txt, i, {

					tips : [ t.options.type, t.options.color ],

					time : t.options.time

				}) : t.log()

			} else {

				if ("undefined" != typeof o.title && "undefined" != typeof o.txt && "undefined" != typeof o.img) {

					var e = '<div class="m-popup-ct">',

						n = '<h3 class="tt"><span class="txt_01">' + o.title + t.options.titleEnd + '</span></h3><div class="line_01"></div>',

						s = "</div>",

						l = '<ul class="u-explain-list">',

						p = o.txt.split("|"),

						a = p.length;

					a > 0 && $.each(p, function(t, i) {

						l += '<li><i class="f-mr5">' + (t + 1) + "</i>" + i + "</li>"

					});

					var r = /^[1-9][\d]{0,2}$/,

						c = t.options.imgWidth,

						d = t.options.imgHeight;

					"undefined" != typeof o.w && "undefined" != typeof o.h && r.test(o.w) && r.test(o.h) && (c = o.w, d = o.h), l += '<li><i class="f-mr5">' + (a + 1) + "</i><img src=" + o.img + ' width="' + c + '" height="' + d + '"/></li>', l += "</ul>";

					var h = e + n + l + s;

					layer.open({

						title : !1,

						type : 1,

						area : [ t.options.width, t.options.height ],

						shadeClose : !0,

						maxmin : !1,

						move : !1,

						scrollbar : !1,

						content : h

					})

				} else {

					t.log()

				}

			}

		})

	},

	log : function() {

		console.log("请给定提示标题|文字|图片---来自[script.js]函数[helpTips]")

	}

};

附上源码下载：源码

点击HTML页面问号出现提示框的更多相关文章

请求servlet操作成功后，在JSP页面弹出提示框
应用环境: 点击前台页面,执行某些操作.后台action/servlet 执行后,返回处理结果(成功.失败.原因.状态等)信息.在前台jsp进行弹窗显示,alert(); 后台处理代码:(把要提示的数 ...
javascript的关于刷新页面给出提示框的代码
// 页面刷新事件 ,或者关闭事件的3中方法!测试都可以!参考官方文档: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHan ...
超链接 a 标签点击时，弹出提示框，可以按照如下来写
onclick="return confirm('确定删除该条记录?')" 加上这条记录后,就可以在访问href属性指向的链接时,有弹出提示
form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法
针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本将WebBrowser控件ScriptErrorsSuppressed设 ...
经验总结：WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法
经验总结:WebBrowser自动点击弹出提示框alert.弹出对话框confirm.屏蔽弹出框.屏蔽弹出脚本错误的解决办法网上有好多解决方法,可是不一定好使,本人经过多次试验,针对WebBrows ...
关于.NET前后台提示框的那点事
前言关于提示框,或多或少都用到过,提示框常见方式两种:js原生alert() 和 div模拟弹层:下面以一个常见的需求业务场景来展现提示框的那点事: 正文内容客户:需求方: 小白:实现方(全权负责 ...
【.NET】关于.NET前后台提示框的那点事
前言关于提示框,或多或少都用到过,提示框常见方式两种:js原生alert() 和 div模拟弹层:下面以一个常见的需求业务场景来展现提示框的那点事: 正文内容客户:需求方: 小白:实现方(全权负责 ...
关于iChartjs在移动端提示框tip显示不正常的解决方法
最近项目需要使用手机图表,但是找了很久都没找到专门为移动端开发的图表,只能找一些能兼容移动端的图表控件,今天就讲讲关于iChartjs这个图形库的一点问题. 问题 iChartjs的提示框tip的显示 ...
bootstrap 弹窗或者提示框插件 bootstrap-growl 和bootstrap-notify
Bootstrap简单好用的页面右上角咆哮提示框 - daidaineteasy的专栏 - CSDN博客https://blog.csdn.net/daidaineteasy/article/deta ...

随机推荐

Jvm性能监控和常用工具
JDK常用命令行工具 Jps : jps [options] [hostid] , -q 只显示jvmid, -m 传递给主类main的参数,-l 类全名,-v jvm启动参数 jstat : ...
怎样关闭占用80端口的pid为4的进程
我也被这个问题给纠结了好几天.重装系统都三次了.终于找到原因了:我用的是sqlserver 2008;解决方法:window-sqlserver 2008-配置工具-sqlserver 配置管理器找 ...
11.7NOIP模拟赛解题报告
心路历程预计得分:\(50 + 100 + 100\) 实际得分:\(50 + 100 +100\) T2 T3两道数据结构题美滋滋,然而写完就过去\(3h\)美滋滋 T1数学题学弟们都会做Orzz ...
linux下通过NFS将远程磁盘mount到本地
最近由于项目原因需要和其他两家公司对接,需要取对方服务器中的图像数据,原本约定是三方都通过http协议来进行通讯,奈何对接方不配合,说文件就在他们服务器放着,怎么取他们不管.所以采取将对方服务器磁盘挂 ...
GitHub教程(一) 使用指南
刚进公司上班的时候,技术总监让我熟悉一下Git(分布式版本控制工具)操作命令和GitHub(代码托管平台),说实话之前我也没有具体使用过Git工具,但是GitHub我还是注册过账号的.在练习将本地仓库 ...
web项目开发流程
对于一个web项目,在实际编码之前,有一些通用的步骤来planning a website: 0.Defining the project (predr0->dr0) 对于外部项目,客户一般会发 ...
Redis源码学习1-sds.c
https://github.com/huangz1990/redis-3.0-annotated/blob/unstable/src/sds.c#L120 /* SDSLib, A C dynami ...
MUI实现上拉加载和下拉刷新
编写存储过程分页(此处使用T-SQL) CREATE PROC [dbo].[Common_PageList] ( @tab nvarchar(max),---表名 @strFld nvarchar( ...
win+ R下的常见命令
-------------------------电脑运行常见命令----------------------------- Windows+R输入cmd 运行net start mssqlserve ...
加密算法IV的作用
使用随机数产生的初始化向量才能达到语义安全(散列函数与消息验证码也有相同要求),并让攻击者难以对同一把密钥的密文进行破解初始化向量的值依密码算法而不同.最基本的要求是“唯一性”,也就是说同一把密钥不 ...

点击HTML页面问号出现提示框

本demo的功能：点击页面按钮在其边缘出现提示信息，点击页面任何一处则消失。

1.所需插件：

2.HTML内容：

3.css内容：（非必要）

4.javascript内容：（核心）

附上源码下载：源码

点击HTML页面问号出现提示框的更多相关文章

随机推荐

热门专题