点击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 ...

随机推荐

nodejs的socket.io学习笔记
socket.io学习笔记 1.服务器信息传输: 2.不分组,数据传输: 3.分组数据传输: 4.Socket.io难点大放送(暂时没有搞定): 服务器信息传输 1. // send to curre ...
java.io.FileNotFoundException
1. 概述上传图片到 o:/mmfiles_2017/39973/25444/333.jpg目录下目录不存在会报标题中的错误必须先创建目录 2. 方法 File filePath = new F ...
ideal key
常用快捷键设置快捷键:File -> Settings -> IDE Settings -> Keymap -> 选择“eclipse” -> 然后“Copy”一份 - ...
linux 系统开机自启执行操作的配置
1 linux 服务注册 service文件在service文件中设置变量和环境变量 [Unit] Description= #服务描述 After=syslog.target #服务启动依赖 [S ...
shiro（java安全框架）
shiro(java安全框架) 以下都是综合之前的人加上自己的一些小总结 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码学和会话管理.使用Shiro的易于理解的A ...
安装Access Database Engine后，提示未注册Microsoft.ACE.OLEDB.12.0
未注册Microsoft.ACE.OLEDB.12.0 ,下载安装 Microsoft Access Database Engine:https://www.microsoft.com/en-us/d ...
Oracle案例05——ORA-12162: TNS:net service name is incorrectly specified
最近在梳理环境,发现环境真的不是一般的复杂,配置不是一般的乱,刚在梳理环境的时候发现一个库通过conn /as sysdba无法连接,具体处理过程如下: 一.错误信息 [oracle@ ~]$ sql ...
教你如何封装异步网络连接NSURLConnection实现带有百分比的下载
教你如何封装异步网络连接NSURLConnection实现带有百分比的下载注:本教程需要你对block有着较为深刻的理解,且对如何封装对象有着一些经验. 也许你已经用惯了AFNetworking2. ...
python filter&sorted
filter filter()接收一个函数和一个序列和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是True还是False决定保留还是丢弃该元素在一个list中, ...
antd button
引用 :import { Button } from 'antd'; <Button type = "primary" //按钮样式颜色 shape = "circ ...

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

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

1.所需插件：

2.HTML内容：

3.css内容：（非必要）

4.javascript内容：（核心）

附上源码下载：源码

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

随机推荐

热门专题