JQuery定时自动消失提示框/弹出框

  • 内容
  • 相关

在表单提交中,不论成功与否,好的体验都应该有弹出提示,效果:

在页面中央显示提示,1.5秒后消失,不影响页面的正常布局。

1 HTML代码

HTML代码显示提示内容,放在页面中任何位置。

<div class="alert"></div>

2 CSS代码

弹出框参考了 Bootstrap 的样式:

.alert { display: none; position: fixed; top: 50%; left: 50%; min-width: 200px; margin-left: -100px; z-index: 99999; padding: 15px; border: 1px solid transparent; border-radius: 4px;
} .alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6;
} .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1;
} .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc;
} .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1;
}

3 Javascript代码

首先,加载JQuery,然后用下面代码实现1.5后淡出效果:

$('.alert').html('操作成功').addClass('alert-success').show().delay(1500).fadeOut();

如果不想在HTML中加DIV,可以直接用JS把DIV添加到页面中,如下:

$('<div>').appendTo('body').addClass('alert alert-success').html('操作成功').show().delay(1500).fadeOut();

一般情况下,如果这个方式使用得很频繁,写成函数可以提高复用:

/**
 * 弹出式提示框,默认1.2秒自动消失
 * @param message 提示信息
 * @param style 提示样式,有alert-success、alert-danger、alert-warning、alert-info
 * @param time 消失时间
 */ var prompt = function (message, style, time) {
    style = (style === undefined) ? 'alert-success' : style;
    time = (time === undefined) ? 1200 : time;
    $('<div>')
        .appendTo('body')
        .addClass('alert ' + style)
        .html(message)
        .show()
        .delay(time)
        .fadeOut();
}; // 成功提示 var success_prompt = function(message, time) {
    prompt(message, 'alert-success', time);
}; // 失败提示 var fail_prompt = function(message, time) {
    prompt(message, 'alert-danger', time);
}; // 提醒 var warning_prompt = function(message, time) {
    prompt(message, 'alert-warning', time);
}; // 信息提示 var info_prompt = function(message, time) {
    prompt(message, 'alert-info', time);
};

这样比用setTimeout()结构更清晰。

JQuery定时自动消失提示框/弹出框
         本页正文内容约1621个文字
         本文标签:

         版权声明:若无特殊注明,本文皆为“懒人的小窝”原创,转载请保留文章出处。

         本文链接:https://suppore.cn/672.html   百度已收录

发表评论

电子邮件地址不会被公开, 推荐使用QQ快速评论!

评论

2条评论
  1. avatar

    天津网站建设 Lv.2 Chrome 49.0.2623.110 Chrome 49.0.2623.110 Windows 7 x64 Edition Windows 7 x64 Edition 回复

    学习学习 这种效果做出来好看

    天津市 联通

    1. avatar

      精美讲台 Lv.1 uBrowser 6.1.3228.1 uBrowser 6.1.3228.1 Windows 7 x64 Edition Windows 7 x64 Edition 回复

      膜拜大神……

      广东省深圳市 电信

      00:00 / 00:00
      顺序播放