使用js 或者 jquery 实现自定义提示框

瞌睡凡

已于 2023-05-26 17:19:53 修改

阅读量385

点赞数 1

分类专栏： js 文章标签： javascript jquery 前端

于 2023-05-26 17:18:20 首次发布

本文链接：https://blog.csdn.net/weixin_61738415/article/details/130888505

版权

js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

js

hint.js

// 创建div
    const div = document.createElement('div')
    // 给div添加内容
    div.innerText = text
    // 添加样式
    const divStyle = `
        width:380px;
        height:50px;
        line-height:50px;
        text-align: center;
        border-radius:4px;
        position: absolute;
        top: 25px;
        left: 50%;
        transform: translateX(-50%);
        opacity: 1;
        transition: opacity .5s;
    `
    div.setAttribute('style', divStyle);
    if (color == 'success') {
        div.style.color = '#67C23A'
        div.style.background = "#F0F9EB"
    } else if (color == 'warning') {
        div.style.color = '#E6A23C'
        div.style.background = "#FDF6EC"
    } else if (color == 'error') {
        div.style.color = '#F56C6C'
        div.style.background = "#FEF0F0"
    } else {
        div.style.color = "#909399"
        div.style.background = "#F4F4F5"
    }

    // 创建img
    const img = document.createElement('img')
    img.src="./images/x.png"
    const imgStyle = `
        width:12px;
        height:13px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
        cursor: pointer;
    `
    img.setAttribute('style', imgStyle);
    // 在div中添加img
    div.appendChild(img)
    // 点击图片隐藏div
    img.addEventListener('click',()=>{
        div.style.opacity = 0
    })

    let time = 0
    let timer = setInterval(()=>{
        time++
        // 提示框停留时间(秒) 
        if(time==3){
            clearInterval(timer)
            div.style.opacity = 0
            // 如果不想看动效,可以把定时器去除
            setTimeout(()=>{
                // 隐藏后把元素删除
                div.remove();
            },500)

        }
    },1000)
    const body = document.querySelector("body")
    body.appendChild(div)

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入hint.js文件 -->
    <script src="./js/hint.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="a">
        <button id="hints" onclick="but()">获取提示</button>
    </div>
    <script>
        function but(){
            console.log('9633');
            hint('返回成功','success')
        }
    </script>
</body>

</html>

jQuery

hint.js

function hint(text,color) { 
    //创建一个新的div元素
    var $div = $("<div></div>").text(text);
    var $img = $("<img src='./images/x.png' />");
    $img.css({
        'width':'12px',
        'height':'13px',
        'position': 'absolute',
        'top': '50%',
        'transform': 'translateY(-50%)',
        'right': '15px',
        'cursor': 'pointer'
    })
    // 在$div中后追加一个图片
    $($div).append($img)
    // 点击图片隐藏$div
    $img.click(function () { 
        $div.css('opacity', '0')
    });
    $div.css({
        'width':'380px',
        'height':'50px',
        'line-height':'50px',
        'text-align': 'center',
        'border-radius':'4px',
        'position': 'absolute',
        'top': '25px',
        'left': '50%',
        'transform': 'translateX(-50%)',
        'opacity': '1',
        'transition': 'opacity 1s'
    })
    if(color=='success'){
        $div.css("color", "#67C23A");
        $div.css("background", "#F0F9EB");
    }else if(color=='warning'){
        $div.css("color", "#E6A23C");
        $div.css("background", "#FDF6EC");
    }else if(color=='error'){
        $div.css("color", "#F56C6C");
        $div.css("background", "#FEF0F0");
    }else{
        $div.css("color", "#909399");
        $div.css("background", "#F4F4F5");
    }
    let time = 0
    let timer = setInterval(()=>{
        time++
        // 提示框停留时间(秒) 
        if(time==3){
            clearInterval(timer)
            $div.css('opacity', '0')
            $($div).remove();

        }
    },1000)
 
    $('body').append($div)
}

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-3.7.0.min.js"></script>
  	<!-- 引入hint.js文件 -->
    <script src="./js/hint.js"></script>
    <title>Document</title>
    <style></style>
</head>

<body>
    <div class="a">        
        <button id="hints">获取提示</button>
    </div>
    <script>
        $(()=>{
            $('#hints').click(()=>{
           	 	// hint(需要提示的内容,类型)
                hint('9638200000000','success')
            })
        })
    </script>
</body>

</html>