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

如下图：

1.所需插件：

  • jquery插件；
  • layer插件；

2.HTML内容：

注意：

  1. class="j-help-tips"这个class是核心，不可缺少。
  2. data-tips属性是必须的。
  3. data-tips属性中：type："1"不用修改；
  4. 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页面问号出现提示框的更多相关文章

  1. 请求servlet操作成功后，在JSP页面弹出提示框

    应用环境: 点击前台页面,执行某些操作.后台action/servlet 执行后,返回处理结果(成功.失败.原因.状态等)信息.在前台jsp进行弹窗显示,alert(); 后台处理代码:(把要提示的数 ...

  2. javascript的关于刷新页面给出提示框的代码

    // 页面刷新事件 ,或者关闭事件的3中方法!测试都可以!参考官方文档: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHan ...

  3. 超链接 a 标签点击时，弹出提示框，可以按照如下来写

    onclick="return confirm('确定删除该条记录?')" 加上这条记录后,就可以在访问href属性指向的链接时,有弹出提示

  4. form WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

    针对WebBrowser控件中自动点击弹出框及禁用脚本提示问题得到如下几种实际情况的解决办法,绝对管用. 1.屏蔽弹出错误脚本 将WebBrowser控件ScriptErrorsSuppressed设 ...

  5. 经验总结：WebBrowser自动点击弹出提示框alert、弹出对话框confirm、屏蔽弹出框、屏蔽弹出脚本错误的解决办法

    经验总结:WebBrowser自动点击弹出提示框alert.弹出对话框confirm.屏蔽弹出框.屏蔽弹出脚本错误的解决办法 网上有好多解决方法,可是不一定好使,本人经过多次试验,针对WebBrows ...

  6. 关于.NET前后台提示框的那点事

    前言 关于提示框,或多或少都用到过,提示框常见方式两种:js原生alert() 和 div模拟弹层:下面以一个常见的需求业务场景来展现提示框的那点事: 正文内容 客户:需求方: 小白:实现方(全权负责 ...

  7. 【.NET】关于.NET前后台提示框的那点事

    前言 关于提示框,或多或少都用到过,提示框常见方式两种:js原生alert() 和 div模拟弹层:下面以一个常见的需求业务场景来展现提示框的那点事: 正文内容 客户:需求方: 小白:实现方(全权负责 ...

  8. 关于iChartjs在移动端提示框tip显示不正常的解决方法

    最近项目需要使用手机图表,但是找了很久都没找到专门为移动端开发的图表,只能找一些能兼容移动端的图表控件,今天就讲讲关于iChartjs这个图形库的一点问题. 问题 iChartjs的提示框tip的显示 ...

  9. bootstrap 弹窗或者提示框插件 bootstrap-growl 和bootstrap-notify

    Bootstrap简单好用的页面右上角咆哮提示框 - daidaineteasy的专栏 - CSDN博客https://blog.csdn.net/daidaineteasy/article/deta ...

随机推荐

  1. spring和jdbc结合的一个小例子

    1.新建一个SpringJdbc的maven项目. 2.引入需要的jar包的依赖 <span style="white-space:pre"> </span> ...

  2. mysql三表联合查询

    -- SELECT d.userId, d.userPhoNum, a.orderId, a.productType, b.courseId, b.courseName, c.payJe -- FRO ...

  3. sql server or Oracle: table MS_Description

    --SQL Server表描述 及 字段描述的增.删.改.查询 --sql server 2000系统表sysproperties在SQL 2008中无效的问题 今天无意中在网上发现Sqlserver ...

  4. CentOS7下开启端口

    开启端口: firewall-cmd --zone=public --add-port=80/tcp --permanent 含义: --zone #作用域 --add-port=80/tcp #添加 ...

  5. The method setItems(String) in the type ForTokensTag is not applicable for the arguments (Object)

    1. 问题 看到这个错误以为是貌似jsp页面有误,c:forTokens标签用错了?? An error occurred at line: in the jsp file: /WEB-INF/pag ...

  6. Python爬虫教程-18-页面解析和数据提取

    本篇针对的数据是已经存在在页面上的数据,不包括动态生成的数据,今天是对HTML中提取对我们有用的数据,去除无用的数据 Python爬虫教程-18-页面解析和数据提取 结构化数据:先有的结构,再谈数据 ...

  7. DBGridEh常用技巧

    一.增加多表头显示方式 DBGridEh1.UseMultiTitle:=True; //打开多标题显示方式 DBGridEh1.Columns[].Title.Caption:='员工编号'; // ...

  8. mysql 链接报 Can't connect to MySQL server on 'localhost' (10061)

    之前好好的,重启了下电脑就报了上面的问题... 解决办法很简单:重启下mysql的服务: win7系统,电脑-管理-服务和应用程序-服务,找到mysql重启 即可.

  9. python 二叉树计算器

    例子:计算1+2+3+4的值 代码: class Buffer(object): """字符串处理函数""" def __init__(se ...

  10. Scrapy框架Windows下安装

    在windows下安装好Python3 后,安装Scrapy也有许多种方法,我这里采用pip 安装.前提您已经安装了pip 直接在cmd命令行中 pip install Scrapy building ...