bootstrap实现的web开发中操作提示取代alert 实用！！

最新推荐文章于 2025-06-28 09:10:11 发布

yangyuscript

最新推荐文章于 2025-06-28 09:10:11 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaWeb 文章标签： bootstrap javaWeb

本文链接：https://blog.youkuaiyun.com/yangyuscript/article/details/54773526

javaWeb 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用JavaScript在网页上展示提示信息的方法，包括不同类型的提示（如成功、警告、失败等），并提供了具体的实现代码及调用示例。

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

//tip是提示信息，type:'success'是成功信息，'danger'是失败信息,'info'是普通信息
function ShowTip(tip, type) {
    var $tip = $('#tip');
    if ($tip.length == 0) {
        $tip = $('<span id="tip" style="font-weight:bold;position:absolute;top:50px;left: 50%;z-index:9999"></span>');
        $('body').append($tip);
    }
    $tip.stop(true).attr('class', 'alert alert-' + type).text(tip).css('margin-left', -$tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}
//tip始终显示在屏幕上方top：50px
function ShowTipAlwaysInTheMiddle(tip,type){
	 /*var $left=document.body.clientWidth/2;
	 var $top=document.body.clientHeight/2;
	 alert($left+","+$top);*/
	 var $tip = $('#tip');
	    if ($tip.length == 0) {
	        $tip = $('<span id="tip" style="font-weight:bold;position:fixed;top:50px;left:50%;z-index:9999"></span>');
	        $('body').append($tip);
	    }
	    $tip.stop(true).attr('class', 'alert alert-' + type).text(tip).css('margin-left', -$tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}
function ShowMsg(msg) {
    ShowTip(msg, 'info');
}
function ShowMiddle(msg){
	ShowTipAlwaysInTheMiddle(msg,'info');
}
function ShowSuccess(msg) {
    ShowTip(msg, 'success');
}

function ShowFailure(msg) {
    ShowTip(msg, 'danger');
}

function ShowWarn(msg, $focus, clear) {
    ShowTip(msg, 'warning');
    if ($focus) $focus.focus();
    if (clear) $focus.val('');
    return false;
}

调用：

效果：