本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课程 Spring入门篇 5-5 advice应用（下）

    2 代码演练 2.1 环绕通知(不带参数) 2.2 环绕通知(带参数) 2 代码演练 2.1 环绕通知(不带参数) 实体类: package com.imooc.aop.schema.advice.b ...

  2. ECMA6所有知识点大概笔记

    ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现 初学者一开始学习JavaScript,其实就是在学3.0版的语法. -------------------- ...

  3. mysql 查询近几天的结果 按每天的粒度查询

    ),DATE_FORMAT(FROM_UNIXTIME(createtime), '%Y-%m-%d') as time from bskuser group by time

  4. 【Android】11.0 UI开发（二）——列表控件ListView的简单实现1

    ************************ 转载请注明出处:https://www.cnblogs.com/xiaofu007/p/10342462.html ***************** ...

  5. intellij-maven-imports-have-broken-classpath

    公司自己搭得maven私服,然后使用git下载 公司mvn的依赖包时候,报错: 之后再idea里面发现依赖的jar包 有红色的错误信息,提示 maven imports have broken cla ...

  6. SQL Server ->> PERCENTILE_CONT、PERCENTILE_DISC 和 PERCENT_RANK 函数

    PERCENTILE_CONT和PERCENTILE_DISC都是为了计算百分位的数值,比如计算在某个百分位时某个栏位的数值是多少.他们的区别就是前者是连续型,后者是离散型.CONT代表continu ...

  7. IIS7下设置上传大小的限制

    一.找到修改大小的配置文件和配置节点 打开你系统盘(我是C盘),找到 C:\Windows\System32\inetsrv\config\schema目录,该目录下有一个IIS_schema.xml ...

  8. 【Z】扩展阿里巴巴Java开发规约插件

    https://blog.csdn.net/u014513883/article/details/79186893 1.前言 工作中难免会遇到维护别人代码的情况,那么首先就得看懂别人写的代码.如果对方 ...

  9. 来自Google资深工程师的API设计最佳实践

    来自Google资深工程师Joshua Bloch的分享:API设计最佳实践 为什么API设计如此重要?API是一个公司最重要的资产. 为什么API的设计对程序员如此重要? API一旦发布,出于兼容性 ...

  10. Maven高级应用--编译全模块包-dist包

    1. 在需要生成dist包的模块级别,新建文件夹xxx-xxxx-dist 2. 进入目录,新建pom.xml,建议copy 3. dependencies节点,把要编译成全局包的应用引入进来 < ...