`

Create a success alert via bootstrap

 
阅读更多
Alerts are a nice feature in Bootstrap to grab a user’s attention and deliver information. The different types of alerts are success, info, warning and danger, which are color coded accordingly. Alerts can include a close button for users to remove it from view once they have read it. In my project I wanted success alerts to show to users then, after a few seconds close on their own. This can be done easily with jQuery’s fadeTo() function. You can also incorporate a slick transition effect with the slideUp() function.



<div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">×</a>
     <h4>Success</h4>
    <br />
    <div>All records were processed correctly!</div>
</div>
Then you just need a little script. This script targets only success alerts and will close it after 5 seconds:

window.setTimeout(function () {
    $(".alert-success").fadeTo(500, 0).slideUp(500, function () {
        $(this).remove();
    });
}, 5000);
分享到:
评论

相关推荐

    Bootstrap-Cookie-Alert:为Bootstrap 34构建的简单美观的cookie警报。不需要依赖项

    Bootstrap-Cookie-Alert Bootstrap的一个简单,美观的cookie警报。 不需要依赖项。 我们建议使用Bootstrap 4 ,但是Boostrap 3也应该可以正常工作。 (使用Bootstrap 4) 不幸的是,我不修改多维数据集模式的来源:...

    alert和confirm的bootstrap实现

    1. **创建Alert**:要创建一个Bootstrap Alert,首先需要在HTML中添加一个`&lt;div&gt;`元素,并为其添加`alert`和`alert-[type]`类,其中`[type]`可以是`info`、`success`、`warning`或`danger`,以表示不同类型的警告。...

    前端项目-bootstrap-sweetalert.zip

    Bootstrap-Sweetalert是一个前端项目,它为JavaScript提供了一个优雅的、用户友好的对话框插件,用以替代传统的警告、确认和信息提示。这个项目基于流行的Bootstrap框架,因此它继承了Bootstrap的美观和响应式设计,...

    bootstrap3-dialog可用于angularJS+bootstrap前段的弹框alert

    本实例参考了其他人的例子,并对alert弹框做了改进,调整位置居中 具体修改: bootstrap.min.css:.modal-dialog{width:600px;margin:300px auto} bootstrap-dialog.min.css:.bootstrap-dialog .bootstrap-dialog-...

    后台UI框架bootstrap-table+sweetalert

    link rel="stylesheet" type="text/css" href="/resources/bootstraptable/css/sweetalert.css?v=4.1.0"&gt; &lt;link rel="stylesheet" type="text/css" href="/resources/bootstraptable/css/bootstrap.min.css?v=...

    Rails.Angular.Postgres.and.Bootstrap.2nd.Edition

    Create a usable and attractive login form using Bootstrap's styles, while ensuring the database table backing it is secure using Postgres' check constraints. See how creating an advanced Postgres ...

    bootstrap4.pop:基于bootstrap4,封装的消息组件 dialog,alert,confirm,input,success,error,notice。并且对话框支持鼠标,手指拖拽

    基于bootstrap4,封装的消息组件 dialog, alert, confirm, prompt, notice,支持鼠标及手势拖拽 (surface笔记本) 更新 V1.1 [2021/01/01] 调整了代码 修复了触控模式下无法关闭对话框的bug V1.0.0 [2019/06/05] 提交...

    bootstrap-sweetalert 弹窗插件

    SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。

    bootstrap bootstrap-3.3.7

    这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...

    Bootstrap.By.Example.1785288

    Bootstrap is a free, open source collection of tools that helps developers create websites or web applications. It provides a faster, easier, and less repetitive solution to designing and building ...

    Bootstrap 4 Cookbook

    If you are a web designer or a developer who is familiar with the basics of Bootstrap and now want to build highly responsive and professional web pages using Bootstrap 4, this cookbook will get you ...

    Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码

    最近用到bootstrap的告警框时发现只有html的说明,就自己写了一个弹出告警框和弹出... * @param type 消息框类型(参考bootstrap的alert) */ alert: function(msg, type){ if(typeof(type) ==undefined) { // 未传

    基于bootstrap4封装的消息对话框组件

    type: 'success', // 可以是'dialog', 'alert', 'confirm', 'input'等 onOk: function() { // 确认按钮点击时的回调 }, onCancel: function() { // 取消按钮点击时的回调 } }); ``` 总结起来,这款基于...

    Bootstrap警告框(Alert)插件使用方法

    例如:&lt;div class="alert alert-success"&gt; &lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="close" data-dismiss="alert" aria-hidden="true"&gt;√&lt;/a&gt; 成功!...

    bootstrap-table.js

    bootstrap-table.js bootstrap-table.js bootstrap-table.js bootstrap-table.js

    bootstrap 期末项目 设计报告 模板

    Bootstrap 提供了一些常用的组件,例如 Navbar、Carousel、Alert、Badge、Breadcrumb 等。这些组件可以快速构建 Web 应用程序的用户界面。 在本文档中,我们可以看到 Bootstrap 的一些组件的应用,例如 Navbar 组件...

    Bootstrap5 图标库 bootstrap-icons

    Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源,它为开发者提供了大量美观、一致的SVG图标,可以方便地集成到Bootstrap5项目中,为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...

    bootstrap文件及bootstrap图标大全

    Bootstrap,由Twitter开发,是一款广泛应用于前端开发的开源框架,以其简洁、直观和强大的特性而闻名。Bootstrap 3.3.7是该框架的一个稳定版本,提供了丰富的组件、响应式设计以及易于定制的样式,旨在帮助开发者...

Global site tag (gtag.js) - Google Analytics