1.所需插件：

框架插件；

层插件；

2.超文本标记语言内容：

==注意==:

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

数据提示属性是必须的。

数据提示属性中：类型："1"不用修改；

数据提示属性中：txt内容即是要提示的内容。

超文本标记语言

头

linkrel='样式表href=' style。CSS ' '类型=' text/CSS '/

/head

身体

div style=' margin-top :10%；"左边距-:10%；"

spanclass='testSpan '

I class=' EDI-iconj-help-tips ' data-tips=' { ' type ' : ' 1 '，' txt': '提示内容111.}'/i

/span

spanstyle=' margin:30px '

I class=' EDI-iconj-help-tips ' data-tips=' { ' type ' : ' 1 '，' txt': '提示内容222.}'/i

/span

spanstyle=' margin:30px '

I class=' EDI-iconj-help-tips ' data-tips=' { ' type ' : ' 1 '，' txt': '提示内容333.}'/i

/span

/div

/body

！- jquery -

脚本src=' http://代码。jquery。com/jquery-最新。js '/脚本

！-层-

脚本src=' layer/layer。js ' type=' text/JavaScript '/script

！-提示插件-

脚本src='脚本。js ' type=' text/JavaScript '/script

脚本

$(function(){！-页面初始化加载-

vartips=newhelpTips().init()；

})/script/html

3.css内容：(非必要)

本演示的钢性铸铁非必须，不影响功能；EDI-图标{

font-size :18 px

字体样式： normal

-web工具包-font-smooth :抗锯齿；

-web kit-text-stroke-width :2 px；

-moz-OSX-font-smooth :级；

*显示：内联

* zoom:1

光标：指针指针；

}

4.javascript内容：(核心)

//定义提示弹出框；

varhelpTipsLayer

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

功能帮助提示(t){

this.options={}，

this.options.elem=' .j-帮助-提示',//与页面班级相对应；

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 '，

'未定义！=typeoft(this.options=$ .extend({}，this.options，t))，

这个。elemobj=$(这个。选项。elem)

}

！

function(){

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

$(文档)。on('click '，function(event){

vare=event | | window.event

var target=e . target | | e . Sr element；

varflag=$(目标)。有类(' j-help-tips ')；

if(helpTipsLayer！标志){

层。关闭(帮助提示层)；

}

})

}()，helpTips.prototype={

构造器：帮助提示，

init:function(){

this.bindEvent()

},

bindEvent:function(){

vart=这个

t.elemObj.on('click '，function(){

层。关闭(帮助提示层)；//点击其他任意的提示框按钮，则关闭上一个提示框。

vari=$(此),

o=I . data(' tips ')；

if('undefined '！=typeofo'undefined '！=typeofo.type1==o.type){

'未定义！=typeofo'undefined '！=typeofo.txt？helpptiplayer=layer。提示(o . txt，I，{

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

time:t.options.time

}):t.log()

}else{

if('undefined '！=typeofo。标题“未定义”！=typeofo.txt'undefined '！=typeofo.img){

vare='pclass='m-popup-ct ' '，

n=' H3 class=' TT ' span class=' txt _ 01 ' ' o . title t . options .title ENd '/span/h3p class=' line _ 01 '/p '，

s='/p '，

l=' ul class=' u-解释-列表'',

p=o.txt.split('| ')，

a=p .长度

a0美元。每个(p，函数(t，i){

l=' Li class=' f-mr5 ' '(t1)'/I ' I '/Li '

});

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

c=t.options.imgWidth，

d=t .选项。IMgheight

'未定义！=typeofo.w'undefined '！=typeofo。HR . test(o . w)r . test(o . h)(c=o . w，d=o.h)，l=' Li class=' f-mr5 ' '(a 1)'/iimgsrc=' 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,

移动：1,

scrollbar:1,

content:h

})

}else{

t.log()

}

}

})

},

log:function(){

console.log('请给定提示标题|文字|图片-来自[script.js]函数[帮助提示]')

}

};

本文转载自中文网