点击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 ...
随机推荐
- C Primer Plus note7
这个程序是<C Primer Plus 中文版 第六版>书上198页的代码,是一个值的琢磨的程式. 有时间可以看一看: 尤其是下面这几句代码,很精妙: 用了很短的程式,得出了最大值和最小值 ...
- js 密码 正则表达式
1. 代码 function checkPassword(str){ var reg1 = /[!@#$%^&*()_?<>{}]{1}/; var reg2 = /([a-zA- ...
- 弹性布局（flex）
一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局.但在使用时 ...
- 2-1 Sass的控制命令
@if @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还可以配合 @ ...
- 定期重启SSRS 服务
SSRS 在执行了一段时间之后会变得非常卡,遇到好几次内存暴涨,CPU100%的情况. 但是在查询了一通以后发现,这个时间没有人在运行报告,不知道是哪里有问题,没有回收... 所以决定定期在晚上没有不 ...
- VS.Net开发必备,让您的代码自动收缩,如何实现!
一年前,不知在哪里看到这个开发辅助插件,就装上了,之后一直不知不觉得用着,有一天重装了系统,这插件不见了,再也记不起他的名字, 在网上搜索"自动收缩代码","VS开发必备 ...
- 提高 GitHub 网页访问速度 以及 Git Clone 速度 的小技巧
参考: http://www.cnblogs.com/mico-liu/p/9303817.html https://blog.csdn.net/qq756684177/article/details ...
- Idea工具使用
Idea Project与module的理解 1.基础环境的搭建 1.1.IDEA使用--字体.编码和基本设置 2.插件的安装 2.1.在IDEA中配置Gauge环境 2.2.IdeaVim的安装:: ...
- Oracle基础之count(1)和count(*)的区别
在数据库中Count(*)或者Count(1)或者Count([列])或许是最常用的聚合函数.很多人其实对这三者之间是区分不清的.本文会阐述这三者的作用,关系以及背后的原理. 我在网上看到一些所谓的优 ...
- C# 导出excel文件处理科学计数法办法
在邦定gridview控件时在rowdatabound事件中队数据格式化 protected void DataGridView1_RowDataBound(object sender, GridVi ...