溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

怎么實(shí)現(xiàn)點(diǎn)擊HTML頁面問號出現(xiàn)提示框

發(fā)布時(shí)間：2022-03-05 16:02:05 來源：億速云 閱讀：340 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下怎么實(shí)現(xiàn)點(diǎn)擊HTML頁面問號出現(xiàn)提示框的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

本demo的功能：點(diǎn)擊頁面按鈕在其邊緣出現(xiàn)提示信息，點(diǎn)擊頁面任何一處則消失。

如下圖：
怎么實(shí)現(xiàn)點(diǎn)擊HTML頁面問號出現(xiàn)提示框

1.所需插件：

  • jquery插件；

  • layer插件；

2.HTML內(nèi)容：

==注意==：

  1. class="j-help-tips"這個(gè)class是核心，不可缺少。

  2. data-tips屬性是必須的。

  3. data-tips屬性中：type："1"不用修改；

  4. data-tips屬性中：txt內(nèi)容即是要提示的內(nèi)容。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<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":"提示內(nèi)容111..."}'>①</i>

            </span>

            

            <span style="margin: 30px;">

                <i class="edi-icon j-help-tips" data-tips='{"type":"1","txt":"提示內(nèi)容222..."}'>②</i>

            </span>

            

            <span style="margin: 30px;">

                <i class="edi-icon j-help-tips" data-tips='{"type":"1","txt":"提示內(nèi)容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內(nèi)容：（非必要）

  • 本demo的css非必須，不影響功能；

1

2

3

4

5

6

7

8

9

10

.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內(nèi)容：（核心）

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

//定義提示彈出框；

var helpTipsLayer;

//定義彈出框的默認(rèn)設(shè)置；

function helpTips(t) {

    this.options = {},

    this.options.elem = ".j-help-tips", //與頁面class相對應(yīng)；

    this.options.type = 1,

    this.options.color = "#8db3d7",

    this.options.time = 0, //設(shè)置0是提示彈出框不會自動消失；可設(shè)置為其他數(shù)字，以毫秒為單位；

    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() {

    //點(diǎn)擊頁面任何一處可使提示彈出框消失；

    $(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);//點(diǎn)擊其他任意的提示框按鈕，則關(guān)閉上一個(gè)提示框。

            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 = '<h4 class="tt"><span class="txt_01">' + o.title + t.options.titleEnd + '</span></h4><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("請給定提示標(biāo)題|文字|圖片---來自[script.js]函數(shù)[helpTips]")

    }

};

以上就是“怎么實(shí)現(xiàn)點(diǎn)擊HTML頁面問號出現(xiàn)提示框”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手