我要投稿

jquery弹出提示-简易版jQuery弹出提示信息（手动消失）

bendan520 jquery

2023-09-18 0 5,375 百度已收录

进不了网站？换个网络试试！

之前看过一些现成的jQuery弹出层插件如blockUI、Boxy、tipswindow等，但我的要求并不高。我只需要保存后弹出提示信息即可。至于更复杂的弹出层 - 可以对其进行编辑。直接使用bootstrap的modal来实现。为此，我做了一个简单的功能，可以弹出提示信息。

首先在页面上放置一个强有力的提示：。取出来并为其设置样式：

提示信息格式

#tip {
    position: absolute;
    top: 50px;
    left: 50%;
    display: none;
    z-index: 9999;
}

提示消息脚本

//tip是提示信息，type:'success'是成功信息，'danger'是失败信息,'info'是普通信息,'warning'是警告信息
function showTip(tip, type) {
    var $tip = $('#tip');
    $tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}

这样，简单的jQuery弹出提示信息就完成了。说起来里面做了什么，虽然只是弹出一条提示信息，但是信息的位置是网页的top50px，left50%，然后使用margin-left将信息的一半长度向左移动，所以如要实现左右居中，半秒fadeIn显示，2停留一秒，然后fadeOut消失半秒。另外，虽然我也美化了弹窗信息jquery弹出提示，但是我使用了bootstrap的类似alert-successalert-dangeralert-info的alert-warning风格来美化它。为什么我们需要使用 stop(true) ？主要原因是当连续弹出多个提示框时，我的做法是让前一个提示框直接结束所有动作。 w3c一看，$(selector).stop(stopAll ,goToEnd)，stopAll是停止所有未完成的动作。

但这有一个问题。如果文字太紧，感觉不舒服怎么办？然后为其添加最小长度#tip：

min-width: 200px;
text-align: center;

至于为什么我不在showTip方法中添加一个参数来设置弹出消息的停留时间，只是因为我不需要这个参数。我可以直接写进去。这只是我个人的风格。还有一个问题是showTip方法使用起来还是有点不方便，所以我们再封装一下：

function ShowMsg(msg) {
    ShowTip(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;
}

这样jquery弹出提示，当ajax返回信息需要提示时，只需调用ShowSuccess或ShowFailure方法即可。您可能想知道为什么 ShowWarn 看起来不同以及它有什么作用。主要原因是提交表单时需要验证。当客户端验证时会调用该方法。用法如：

添加$focus和clear这两个参数主要是为了方便。。。

另外，如果网页有iframe，并且还想让顶部窗口在iframe中弹出提示信息，就得把showTip方法改一下：

//tip是提示信息，type:'success'是成功信息，'danger'是失败信息,'info'是普通信息,'warning'是警告信息
function showTip(tip, type) {
　　var $tip = $('#tip', top.document); 
　　$tip.stop(true).prop('class', 'alert alert-' + type).text(tip).css('margin-left', - $tip.outerWidth() / 2).fadeIn(500).delay(2000).fadeOut(500);
}

如果不希望样式、跨度、脚本过于分散，可以将它们集成到一个js插件中：

//tip是提示信息，type:'success'是成功信息，'danger'是失败信息,'info'是普通信息,'warning'是警告信息
function ShowTip(tip, type) {
    var $tip = $('#tip');
    if ($tip.length == 0) {
        $tip = $('');
        $('body').append($tip);
    }
    $tip.stop(true).prop('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 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;
}