本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. python文件操作各种模式和常用方法总结r r+ rb r+b

    1.读,r r+ rb r+b read() 全部读取 read(n) 读取一部分 r模式下:n 个字符. rb模式下:n个 字节. readline() 按行读取. readlines() 返回个列 ...

  2. 各种常用的JSON接口

    这里为大家搜集了一些能够返回JSON格式的服务接口.部分需要用JSONP调用. 其中一些接口提供用例参照:http://www.bejson.com/webInterface.php 天气接口 气象局 ...

  3. 《Visual C++ 2010入门教程》系列五：合理组织项目、使用外部工具让工作更有效

    原文:http://www.cnblogs.com/Mrt-02/archive/2011/07/24/2115631.html 这一章跟大家分享一些与c++项目管理.VAX.SVN.VS快捷键等方面 ...

  4. daemontools检测进程，退出拉起

    一.学习的原因: 为了实现在服务异常停止运行后,有一个监控程序能监控到它,并自动重新启动这个服务.以下以tomcat为例子 二.工具supervise Daemontools是一个包含了很多管理Uni ...

  5. JSON中的安全问题

    Web中使用JSON时最常见的两个安全问题: 1.跨站请求伪造: 即CSRF,是一种利用站点对用户浏览器信任发起攻击的方式.典型的就是JSON数组,更多信息请自行上网百度. 2.跨站脚本攻击. 是注入 ...

  6. 实现UILabel渐变色效果

    实现UILabel渐变色效果 效果如下图: 源码: // // CombinationView.h // ChangeColorLabel // // Created by YouXianMing o ...

  7. Spark Broadcast内幕解密：Broadcast运行机制彻底解密、Broadcast源码解析、Broadcast最佳实践

    本课主题 Broadcast 运行原理图 Broadcast 源码解析 Broadcast 运行原理图 Broadcast 就是将数据从一个节点发送到其他的节点上; 例如 Driver 上有一张表,而 ...

  8. IE和Firefox浏览器CSS兼容性技巧整理

    转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 H ...

  9. 时间函数应用　time

    表 1. C 时间函数 function 定义 含义 返回值 精度 time() time 函数获得从 1970 年 1 月 1 日 0 点到当前的秒数,存储在time_t结构之中. time_t 秒 ...

  10. Android webview 点击超链接打开新的webview

    webview.setWebViewClient(new webViewClient() { HitTestResult hit = view.getHitTestResult(); if (hit ...