提示框插件SweetAlert

SweetAlert可以替代Javascript原生的alert和confirm等函数呈现的弹出提示框,

它将提示框进行了美化,并且允许自定义,

支持设置提示框标题、提示类型、内容展示图片、确认取消按钮文本、点击后回调函数等。

准备工作

首先我们必须将SweetAlert插件的js文件和css文件引入到页面中。

<script src="sweetalert.min.js"></script> <link rel="stylesheet" href="sweetalert.css"> 

本文结合的实例中使用了jQuery库,所以jQuery库文件也要引入。

基本使用

在页面中需要调用弹出提示框的的元素上绑定一句话,如点击一个按钮弹出:

$("button").click(function(){     swal("这是一个信息提示框!"); }); 

确认提示

我们在操作删除等危险操作时,一般在删除之前会弹出一个确认提示框,如同javascript的confirm()函数,当点击确认按钮后,再进行下一步真正的删除操作。

$("button").click(function(){     swal({         title: "您确定要删除吗?",          text: "您确定要删除这条数据?",          type: "warning",         showCancelButton: true,         closeOnConfirm: false,         confirmButtonText: "是的,我要删除",         confirmButtonColor: "#ec6c62"     }, function() {         $.ajax({             url: "do.php",             type: "DELETE"         }).done(function(data) {             swal("操作成功!", "已成功删除数据!", "success");         }).error(function(data) {             swal("OMG", "删除操作失败了!", "error");         });     }); }); 

上面的实例代码实现了一个确认删除数据的过程。点击按钮后,弹出提示框,要求用户确认,如果点了确认,则会向后台do.php发送ajax请求,那么do.php就进行对应的数据删除操作,删除后会返回data给前端页面,js根据返回的数据来提示用户操作结果信息。点击这里看演示

选项设置

SweetAlert插件提供了很多选项设置,可以通过自定义很多属性参数等信息来满足项目开发需求。

title:提示框标题。

text:提示内容。

type:提示类型,有:success(成功),error(错误),warning(警告),input(输入)。

showCancelButton:是否显示“取消”按钮。

animation:提示框弹出时的动画效果,如slide-from-top(从顶部滑下)等。

html:是否支持html内容。

timer:设置自动关闭提示框时间(毫秒)。

showConfirmButton:是否显示确定按钮。

confirmButtonText:定义确定按钮文本内容。

imageUrl:定义弹出框中的图片地址。

更多有关SweetAlert插件的信息可以访问项目网址:https://github.com/t4t5/sweetalert。

时间: 2024-12-14 14:52:56

提示框插件SweetAlert的相关文章

在指定位置上方出现通用jquery悬浮提示框插件

工作需要,网站悬浮提示框要求出现在指定元素上方,由于工作量修改比较大所以要求全站通用,所以写了一个juqery插件,插件很简单,大家可以自行更改样式. 请转载此文的朋友务必附带原文链接,谢谢. 原文链接:http://xuyran.blog.51cto.com/11641754/1876266 插件代码如下: //提示框插件 ; (function ($) {     $.fn.tooltips = function (options) {         $.fn.tooltips.defau

强大的响应式jQuery消息通知框和信息提示框插件

lobibox是一款功能非常强大的jQuery消息通知框和信息提示框插件.这个插件分为两个部分:消息通知框和信息提示框.它能非常好的结合Bootstrap使用. 信息提示框 lobibox的信息提示框可以是模态窗口,也可以不是模态窗口. 允许显示多条信息. 允许使用任何可用的CSS动画来显示和隐藏信息提示框. 信息提示框可以显示不同的颜色和图标. 可以设置为确认信息提示框. 可以设置为一行的prompt信息框.(可以使用任何HTML5的输入框类型来作为prompt) 也可以设置为多重prompt

JQUERY 简单易用的提示框插件

业务开发过程中,为了避免用户的误操作,提示框是必要的,于是琢磨出了下面这个使用,方便的提示框 还要引入遮罩层的样式如下: /*弹出层*/.input{height: 32px;border: 1px solid #ccc;border-radius:1px;width:240px;}.layer_icon{ background:url(../images/b_layer.png) no-repeat; display:inline-block;}.w460{width: 460px;}/*弹出

Tipso – 轻巧的jQuery提示框插件

Tooltip(提示框)是一种常见的效果,它通常用在需要进一步解释.说明或提示的某个词上.这种小效果实现起来虽然不难,但如果你想不劳而获,可以试试 Tipso. Tipso 基于 jQuery,提供了很多配置,如: 显示动画持续时间 背景颜色 文本颜色 显示位置(上/右/下/左) 宽度 偏移 加载 ajax 内容 回调函数 使用方法 1.引入文件 <link rel="stylesheet" href="css/tipso.css"> <scrip

js消息提示框插件-----toastr用法

(本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给大家带来帮助. toastr 官网http://codeseven.github.io/toastr/ 这个样式插件支持直接导cdn入链接,但是我尝试了一下cdn加载速度太慢,所以推荐直接下载文件后导入文件 个人演示地址,因为把js放在了头部所以加载时间可能有点长,而且我发现自己的服务器不是很稳定,所

删除提示框插件

引入文件 <script src="../gongju/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="../gongju/tishikuang/js/qikoo.js" type="text/javascript"></script> <link href="../gongj

基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

在各种Web开发过程中,对话框和提示框的处理是很常见的一种界面处理技术,用得好,可以给用户很好的页面体验,Bootstrap开发也一样,我们往往在页面新增.编辑.查看详细等界面使用弹出对话框层的方式进行显示数据,删除则可能使用一个提示确认框,如果操作成功,我们可以使用更丰富的提示框来处理,本篇主要对比说明在Bootstrap开发中用到的这些技术要点. 1.Bootstrap对话框的使用 常规的Bootstrap有几种尺寸的对话框,包括默认状态的小对话框,中等宽度的对话框,和全尺寸的对话框几种,B

另类提示框

我这里说的提示框,就是当用户将鼠标移动到需要提示的图标时,就会在这图标的位置出现一个提示框了. 咦,那这有什么好说的呢? 如果你来实现这一效果,你会怎么做呢? 初步的做法嘛,就是利用PS制作一张提示框内容区域的png图片和一张指向位置的箭头png图片,然后利用这张图片作为提示背景,里面输入指定内容呗. 恩,想法简单粗暴,那我们就来初步实现以下吧. 首先你得有两张上述说的图片,图片制作结果如下:             图一                                  图二

JS组件Bootstrap实现弹出框和提示框效果代码

JS组件Bootstrap实现弹出框和提示框效果代码 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2015-12-08我要评论 这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编 辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户