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

　　1.所需插件：

　　jquery插件；

　　layer插件；

　　2.HTML内容：

　　==注意==：

　　class="j-help-tips"这个class是核心，不可缺少。

　　data-tips属性是必须的。

　　data-tips属性中：type："1"不用修改；

　　data-tips属性中：txt内容即是要提示的内容。

　　<html>

　　<head>

　　<linkrel="stylesheet"href="style.css""type="text/css"/>

　　</head>

　　<body>

　　<divstyle="margin-top:10%;margin-left:10%;">

　　<spanclass="testSpan">

　　<iclass="edi-iconj-help-tips"data-tips='{"type":"1","txt":"提示内容111..."}'>①</i>

　　</span>

　　<spanstyle="margin:30px;">

　　<iclass="edi-iconj-help-tips"data-tips='{"type":"1","txt":"提示内容222..."}'>②</i>

　　</span>

　　<spanstyle="margin:30px;">

　　<iclass="edi-iconj-help-tips"data-tips='{"type":"1","txt":"提示内容333..."}'>③</i>

　　</span>

　　</div>

　　</body>

　　<scriptsrc="http://code.jquery.com/jquery-latest.js"></script>

　　<scriptsrc="layer/layer.js"type="text/javascript"></script>

　　<scriptsrc="script.js"type="text/javascript"></script>

$(function(){

　　vartips=newhelpTips().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内容：（核心）

　　//定义提示弹出框；

　　varhelpTipsLayer;

　　//定义弹出框的默认设置；

　　functionhelpTips(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"!=typeoft&&(this.options=$.extend({},this.options,t)),

　　this.elemObj=$(this.options.elem)

　　}

　　function(){

　　//点击页面任何一处可使提示弹出框消失；

　　$(document).on("click",function(event){

　　vare=event||window.event;

　　vartarget=e.target||e.srcElement;

　　varflag=$(target).hasClass("j-help-tips");

　　if(helpTipsLayer&&!flag){

　　layer.close(helpTipsLayer);

　　}

　　})

　　}(),helpTips.prototype={

　　constructor:helpTips,

　　init:function(){

　　this.bindEvent()

　　bindEvent:function(){

　　vart=this;

　　t.elemObj.on("click",function(){

　　layer.close(helpTipsLayer);//点击其他任意的提示框按钮，则关闭上一个提示框。

　　vari=$(this),

　　o=i.data("tips");

　　if("undefined"!=typeofo&&"undefined"!=typeofo.type&&1==o.type){

　　"undefined"!=typeofo&&"undefined"!=typeofo.txt?helpTipsLayer=layer.tips(o.txt,i,{

　　tips:[t.options.type,t.options.color],

　　time:t.options.time

　　}):t.log()

　　}else{

　　if("undefined"!=typeofo.title&&"undefined"!=typeofo.txt&&"undefined"!=typeofo.img){

　　vare='<pclass="m-popup-ct">',

　　n='<h3class="tt"><spanclass="txt_01">'+o.title+t.options.titleEnd+'</span></h3><pclass="line_01"></p>',

　　s="</p>",

　　l='<ulclass="u-explain-list">',

　　p=o.txt.split("|"),

　　a=p.length;

　　a>0&&$.each(p,function(t,i){

　　l+='<li><iclass="f-mr5">'+(t+1)+"</i>"+i+"</li>"

　　});

　　varr=/^[1-9][\d]{0,2}$/,

　　c=t.options.imgWidth,

　　d=t.options.imgHeight;

　　"undefined"!=typeofo.w&&"undefined"!=typeofo.h&&r.test(o.w)&&r.test(o.h)&&(c=o.w,d=o.h),l+='<li><iclass="f-mr5">'+(a+1)+"</i><imgsrc="+o.img+'width="'+c+'"height="'+d+'"/></li>',l+="</ul>";

　　varh=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]")

　　}

　　};

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h54252.shtml