点击HTML页面问号出现提示框（附源码）

本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-@R_406_2805@-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 = 'p class="m-popup-ct">
    ',                        n = 'h3 class="tt">
    span class="txt_01">
    ' + o.title + t.options.titleEnd + '/span>
    /h3>
    p class="line_01">
    /p>
    ',                        s = "/p>
    ",                        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页面问号出现提示框（附源码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！