一、简介

  所使用过的弹出框插件,SweetAlert是最好用的。发展至今,已经有两个版本,一个是原版 t4t5/sweetalert , 一个是分支版 limonte/sweetalert2 ,更新相对较快,听说更好看。

  SweetAlert是一款不需要jQuery支持的原生js提示框,风格类似bootstrap。现在都已经升级到2.0

  它的提示框不仅美丽动人,并且允许自定义,支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。

  使用非常简单,示例如下

  

swal("Hello world!");

swal("Here's the title!", "...and here's the text!"); //包含子标题

swal("Good job!", "You clicked the button!", "success");//包含图标

二、t4t5/sweetalert

github地址:https://github.com/t4t5/sweetalert

官方文档: https://sweetalert.js.org/docs/

中文:

http://mishengqiang.com/sweetalert/

http://mishengqiang.com/sweetalert/

http://www.sucaihuo.com/jquery/12/1241/demo/

文档中没有浏览器兼容提示,只能自己测试了

三、limonte/sweetalert2

github地址:https://github.com/limonte/sweetalert2

在线实例:https://limonte.github.io/sweetalert2 

中文:http://www.jq22.com/jquery-info8169

  

浏览器兼容

IE11* Edge Chrome Firefox Safari Opera Android Browser* UC Browser*

* ES6 Promise polyfill should be included, see usage example.

SweetAlert2 不再支持ie10及以下版本

漂亮的提示框SweetAlert使用教程的更多相关文章

  1. 基于jquery的响应式提示框SweetAlert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等.交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果.不过本插件至少支持IE9+.使用方式 ...

  2. SweetAlert – 替代 Alert 的漂亮的提示效果

    Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...

  3. 提示框插件SweetAlert

    SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框, 它将提示框进行了美化,并且允许自定义, 支持设置提示框标题.提示类型.内容展示图片.确认取消按 ...

  4. sweetalert提示框

    文档 sweetalert Api:http://t4t5.github.io/sweetalert/ 开源项目源码:https://github.com/t4t5/sweetalert 在文件中首先 ...

  5. Qt QLineEdit 漂亮的搜索框 && 密码模式 && 格式化输入 && 提示文字 && 选择内容并移动 && 清除全部输入

    先上一个漂亮的搜索框效果图, 输入搜索文本效果, 点击搜索图标效果: //实现代码 void MainWindow::iniLineEdit() { ui->lineEdit->setPl ...

  6. 33、Flask实战第33天:sweetalert提示框

    这节我们继续优化,接收到返回值,我们在前端做一些处理,如:密码修改成功,弹出一个成功的提示框.这个提示框我们采用sweetalert 其中xtalert.js是对上面两个文件的一个封装,使得我们用sw ...

  7. jQuery EasyUI 教程-Tooltip(提示框)

    <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta c ...

  8. Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog)

    Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog) Android第三方开源对话消息提示框:SweetAlertDialog(sweet- ...

  9. JS组件系列——Bootstrap寒冬暖身篇:弹出框和提示框效果以及代码展示

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...

随机推荐

  1. Java设计模式之单例模式详解

    在Java开发过程中,很多场景下都会碰到或要用到单例模式,在设计模式里也是经常作为指导学习的热门模式之一,相信每位开发同事都用到过.我们总是沿着前辈的足迹去做设定好的思路,往往没去探究为何这么做,所以 ...

  2. “use strict” 严格模式使用(前端基础系列)

    ECMAscript5添加一种严格模式的运行模式("use strict"),让你的js语句在更加严格的环境下进行运行: 一.主要作用: 消除版本javascript中一些不合理及 ...

  3. memset的实验

      关于memset的实验 实验一:memset对char数组赋初值 #include<iostream> using namespace std; int main() { char a ...

  4. NOIP2016提高组初赛(1)

    一.选择题 6.后缀表达式,使用二叉树来求解,正常情况下的表达式a*(b+c)- d为中序遍历的二叉树. 即 若转换为后缀表达式(左右根)则为abc+*d- 14.代数字进去,多试几遍: 三.问题求解 ...

  5. Mysql的管理及使用

    第1章 Mysql的管理 1.1 连接管理mysql mysql[options] #Linux或UNIX shell提示符(终端窗口) mysql --help #查看帮助信息 mysql --ve ...

  6. Javascript实现简单的下拉二级菜单

    在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/ <span style="font-size:14px;"& ...

  7. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  8. 2014/08/23——OJ及相关站点打开速度非常慢,训练计划login直接error!

    问题: 这个问题存在已经将近一个星期了.刚開始时发现OJ及相关的站点有时候打开有点慢,那时候也没在意,后来时快时慢的越来越频繁:今天早上直接一直都打开非常慢(无论什么时候.这样的情况);训练计划和做题 ...

  9. 解决 PclZip 中文乱码问题

        在使用 Pclzip 时出现无法压缩/解压文件的现象,追踪错误信息发现无法打开文件/文件夹.可是文件夹权限正确,打印文件路径之后发现是乱码. 出现这个问题的解决办法是windows下zip内的 ...

  10. 自学Zabbix2.1-安装需求

    zabbix的安装需求通常就是硬件配置.软件需求,或者说我安装zabbix需要什么软件,服务器需要什么样的配置,监控100台服务器需要怎样的一台服务器,或者我有一台8核16G的服务器,我能监控多少台服 ...