添加提示框_成功时插入div提示框-CSDN博客

本文链接：https://blog.csdn.net/m0_37378152/article/details/120163369

这篇博客介绍了如何使用HTML、CSS和JavaScript实现一个点击元素后显示提示框的效果。示例中，当点击带有所需类名的元素时，会显示一个包含特定文本的提示框，并在点击其他区域时隐藏。CSS用于定义提示框的样式，包括四个不同方向的三角形箭头，而JavaScript则处理提示框的显示和隐藏逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<div class="container" @click="touchScreen">
    <div class="tip" @click="showTip">
                <div class="tip-div">
                    <div class="tip-trangle-right"></div>
                    <div class="tip-text">
                        只允许16岁以上
                    </div>
                </div>
            </div>
</div>

css

.tip {
        background: url('tip.png') 0 0 no-repeat;
        background-size: contain;
        display: inline-block;
        position: relative;
        width: 50px;
        height:50px;

        .tip-div {
            bottom:108px;
            display: none;
            position: absolute;
            width: 200px;
            background: #fff;
            padding: 10px;
            /*设置圆角*/
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        /*提示框-下三角*/
        .tip-trangle-right {
            position: absolute;
            bottom: -10px;
            left: 20px;
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 15px solid #fff;
        }
    /*提示框-左三角*/
    .tip-trangle-left {
        position: absolute;
        bottom: 15px;
        left: -10px;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-right: 15px solid #fff;
    }

    /*提示框-右三角*/
    .tip-trangle-right {
        position: absolute;
        top: 15px;
        right: -10px;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 15px solid #fff;
    }

    /*提示框-上三角*/
    .tip-trangle-top {
        position: absolute;
        top: -10px;
        left: 20px;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #fff;
    }
        .tip-text {
            word-break: break-word;
            height: 50px;
            overflow-y: auto;
        }
    }

      showTip () {
        const dom = document.querySelector('.tip-div')
        if (!dom) return
        dom.style.display = 'block'
      },
      hideTip () {
        const dom = document.querySelector('.tip-div')
        if (!dom) return
        dom.style.display = 'none'
      },
      touchScreen (e) {
        const className = e.target.className
        if (['tip', 'tip-div', 'tip-text', 'tip-trangle-right'].indexOf(className) < 0) {
          this.hideTip()
        }
      }