Home > Article > Web Front-end > Click the question mark on the HTML page and a prompt box will appear (source code attached)

Click the question mark on the HTML page and a prompt box will appear (source code attached)

不言forward: 2019-01-23 10:04:598089browse

The content of this article is about clicking the question mark on the HTML page to display a prompt box (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

The function of this demo: click on the page button and a prompt message will appear on its edge, and click anywhere on the page to disappear.

As shown below:
Click the question mark on the HTML page and a prompt box will appear (source code attached)

1. Required plug-ins:

##jquery plug-in;
layer plug-in;

2.HTML content:

==Note==:

class="j-help-tips"This class is the core and indispensable.
data-tips attribute is required.
In the data-tips attribute: type: "1" does not need to be modified;
In the data-tips attribute: the txt content is the prompt Content.

<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=&#39;{"type":"1","txt":"提示内容111..."}&#39;>①</i>
            </span>
            
            <span style="margin: 30px;">
                <i class="edi-icon j-help-tips" data-tips=&#39;{"type":"1","txt":"提示内容222..."}&#39;>②</i>
            </span>
            
            <span style="margin: 30px;">
                <i class="edi-icon j-help-tips" data-tips=&#39;{"type":"1","txt":"提示内容333..."}&#39;>③</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 content: (not necessary)

The css of this demo is not necessary and does not affect the function;

.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 content: (core)

//定义提示弹出框；
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 = &#39;<p class="m-popup-ct">&#39;,
                        n = &#39;<h3 class="tt"><span class="txt_01">&#39; + o.title + t.options.titleEnd + &#39;</span></h3><p class="line_01"></p>&#39;,
                        s = "</p>",
                        l = &#39;<ul class="u-explain-list">&#39;,
                        p = o.txt.split("|"),
                        a = p.length;
                    a > 0 && $.each(p, function(t, i) {
                        l += &#39;<li><i class="f-mr5">&#39; + (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 += &#39;<li><i class="f-mr5">&#39; + (a + 1) + "</i><img src=" + o.img + &#39; width="&#39; + c + &#39;" height="&#39; + d + &#39;"/></li>&#39;, 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]")
    }
};

The above is the detailed content of Click the question mark on the HTML page and a prompt box will appear (source code attached). For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery css html class

Statement：

This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to remove gaps between inline or inline-block elementsNext article：How to remove gaps between inline or inline-block elements

See more

Click the question mark on the HTML page and a prompt box will appear (source code attached)

1. Required plug-ins:

Related articles