iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >怎么实现点击HTML页面问号出现提示框
  • 719

0
分享到

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

2024-04-02 19:04:59 719人浏览 薄情痞子
摘要

今天小编给大家分享一下怎么实现点击html页面问号出现提示框的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一

今天小编给大家分享一下怎么实现点击html页面问号出现提示框的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

本demo的功能：点击页面按钮在其边缘出现提示信息，点击页面任何一处则消失。

如下图：
怎么实现点击HTML页面问号出现提示框

1.所需插件：

  • Jquery插件；

  • layer插件；

2.HTML内容：

==注意==：

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

  2. data-tips属性是必须的。

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

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

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":"提示内容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非必须，不影响功能；

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内容：（核心）

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;

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

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 = '<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("请给定提示标题|文字|图片---来自[script.js]函数[helpTips]")

    }

};

以上就是“怎么实现点击HTML页面问号出现提示框”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网VUE频道。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 怎么实现点击HTML页面问号出现提示框

本文链接: https://www.lsjlt.com/news/91813.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 怎么实现点击HTML页面问号出现提示框
    今天小编给大家分享一下怎么实现点击HTML页面问号出现提示框的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一...
    99+
    2024-04-02
  • HTML怎么实现点击button页面跳转
    小编给大家分享一下HTML怎么实现点击button页面跳转，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！方法：1、使用onclick事件，在标签内添加“onclick="window.location.href=...
    99+
    2023-06-15
  • HTML页面怎么实现点击下载文件
    今天小编给大家分享一下HTML页面怎么实现点击下载文件的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了...
    99+
    2024-04-02
  • 怎么使用jQuery实现页面弹出提示框功能
    本篇内容主要讲解“怎么使用jQuery实现页面弹出提示框功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么使用jQuery实现页面弹出提示框功能”吧!一、了解jQueryjQuery是一款快...
    99+
    2023-07-05
  • 怎么在html中实现点击图片跳转页面
    今天就跟大家聊聊有关怎么在html中实现点击图片跳转页面，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。html是什么html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签...
    99+
    2023-06-14
  • android弹出提示框怎么实现
    要在Android中实现弹出提示框，你可以通过以下几种方式实现：1. 使用AlertDialog：AlertDialog是Andro...
    99+
    2023-10-08
    android
  • vue中怎么实现点击切换页面
    本教程操作环境：windows7系统、vue3、Dell G3电脑。vue中怎么实现点击切换页面？Vue案例--点击按钮切换页面用vue的方式做一个切换页面的效果。思路：注册一个组件，并在父元素中使用。使用v-if 和 v-else 来控制...
    99+
    2022-11-22
    Vue
  • layui点击弹框页面实现表单请求的示例分析
    这篇文章主要介绍了layui点击弹框页面实现表单请求的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。如下所示：$("#ad...
    99+
    2024-04-02
  • 实例讲解怎么用html实现点击Button元素跳转页面
    在HTML中，可以使用标签实现页面跳转，但是如何通过按钮实现页面跳转呢？这就需要用到HTML中的<button>标签。本文将介绍在HTML中点击Button元素跳转页面。HTML Button基本语法用HTML Button实现...
    99+
    2023-05-14
  • jquery实现界面点击按钮弹出悬浮框
    本文实例为大家分享了jquery实现界面点击按钮弹出悬浮框的具体代码，供大家参考，具体内容如下 首先定义两个div: 一个是背景，一个是悬浮窗。 <input id="Butt...
    99+
    2024-04-02
  • 如何用html实现点击Button元素跳转页面
    这篇文章主要介绍“如何用html实现点击Button元素跳转页面”，在日常操作中，相信很多人在如何用html实现点击Button元素跳转页面问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何用html实现点击...
    99+
    2023-07-05
  • jquery怎么实现点击跳转到新页面
    jQuery (JQuery JavaScript Library) 是一个使用JavaScript编写的快速、小型、功能丰富的JavaScript库， 使得HTML文档操作、事件处理、动画效果和Ajax交互变得更加简单优雅。在Web开发中...
    99+
    2023-05-14
  • php页面怎么用JavaScript实现点击按钮显示隐藏
    这篇文章主要讲解了“php页面怎么用JavaScript实现点击按钮显示隐藏”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“php页面怎么用JavaScript实现点击按钮显示隐藏”吧！第一步...
    99+
    2023-07-05
  • android怎么实现点击按钮跳转页面
    Android中实现点击按钮跳转页面可以通过以下步骤实现：1. 在XML布局文件中定义一个按钮组件，例如：```xml```2. 在Java代码中获取按钮组件，并设置点击事件监听器，例如：```javaButton button = f...
    99+
    2023-08-11
    android
  • android怎么实现点击按钮弹出对话框
    要在Android中实现点击按钮弹出对话框，可以按照以下步骤进行操作：1. 首先，在布局文件中添加一个按钮，例如：```xml```...
    99+
    2023-08-12
    android
  • laravel弹出提示框效果怎么实现
    今天小编给大家分享一下laravel弹出提示框效果怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。laravel中弹出...
    99+
    2023-07-04
  • html怎么实现点导航栏切换页面
    要实现导航栏切换页面，可以使用HTML和JavaScript来完成。以下是一个简单的示例：1. HTML部分：```html导航栏切...
    99+
    2023-08-08
    html
  • html如何实现点击文字跳转到其他页面
    HTML中可以使用``标签实现点击文字跳转到其他页面。例如，要将文字“跳转到其他页面”点击后跳转到“https://www.yisu...
    99+
    2023-08-08
    html
  • 怎么用vue组件实现弹出框点击显示隐藏效果
    本篇内容介绍了“怎么用vue组件实现弹出框点击显示隐藏效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！代码如下1.在当前页面中（主页面）&...
    99+
    2023-07-04
  • vue怎么通过点击事件实现页面跳转
    本篇内容主要讲解“vue怎么通过点击事件实现页面跳转”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么通过点击事件实现页面跳转”吧!this.$router.push()首先我们要定义一个...
    99+
    2023-07-02
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作