在 js文件中实现消息提示功能

奚大野...

已于 2022-07-22 09:32:00 修改

阅读量2.3k

点赞数

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

于 2022-07-22 09:29:00 首次发布

本文链接：https://blog.csdn.net/qq_41752378/article/details/125925561

版权

javascript 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

该博客介绍了如何在JavaScript中创建一个动态消息提示框。通过HTML和CSS定义提示框的样式，然后利用JavaScript实现消息的显示、停留和隐藏效果。示例代码展示了如何调用`showTip`函数，以在页面上显示错误提示信息，并控制提示框的显隐时间。此功能可应用于前端用户交互反馈。

摘要由CSDN通过智能技术生成

在 js文件中实现消息提示功能

HTML

<div id="dialogTip"></div>

CSS

#dialogTip {
    position: absolute;
    top:50px;
    left: 50%;
    display: none;
    z-index: 9999; 
    color:#67c23a;
    background:#e1f3d8;
    padding:0px 100px;
    line-height:45px;
    border-radius:3px
}

JS

//消息提示-此处的三个数值代表时间 1 显现时间  2 停留时间  3 隐藏时间
showTip('结束失败，请先启动SDK!', 'error', 200, 2000, 200);

//文字提示框-方法
function showTip(tip, type, time1, time2, time3) {
  var $tip = $('#dialogTip');
  $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(time1).delay(time2).fadeOut(time3);
}