swal 弹窗html页面,SweetAlert - 演示6种不同的提示框效果

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

查看演示

下载资源：

1612

次下载资源

下载积分：

积分

HTML

首先放置6个不同的提示按钮。

基本示例：点击这里

提示成功：点击这里

提示失败：点击这里

提示确认：点击这里

定义内容：点击这里

确认输入：点击这里

接着引入sweetalert相关组件，该插件不需要jQuery库支持。

我们先看下前三种js，其余请看压缩文件的代码。 $(".demo_1 button").click(function() {

swal("这是一个信息提示框!");

});

$(".demo_2 button").click(function() {

swal("Good!", "弹出了一个操作成功的提示框", "success");

});

$(".demo_3 button").click(function() {

swal("OMG!", "弹出了一个错误提示框", "error");

});

警告框提示 swal({

title: "您确定要删除吗？",

text: "您确定要删除这条数据？",

type: "warning",

showCancelButton: true,

closeOnConfirm: false,

confirmButtonText: "是的，我要删除",

confirmButtonColor: "#ec6c62"

}, function() {

$.post(getUrl("Cart/del"), {id: id}, function(data) {

location.reload();

})

});

提示：本地sweetalert可能不支持IE8，但放在服务器就OK了，保证网页html能支持w3c标准即可。

SweetAlert相关API 参数

描述

默认值

title

提示框标题

text

提示内容

type

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

showCancelButton

是否显示“取消”按钮。

animation

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

html

是否支持html内容。

timer

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

showConfirmButton

是否显示确定按钮。

confirmButtonText

定义确定按钮文本内容。

imageUrl

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

swal 弹窗html页面,SweetAlert - 演示6种不同的提示框效果相关推荐

JS的三种弹出提示框(alert、confirm、prompt)
三种弹出提示框 1.alert() 2.confirm() 3.prompt() 1.alert() 方法会弹出一个警告框,只有确定按钮 alert('这是个警告框') 2.comfim() 会弹出一 ...
android 带箭头提示框,三种带箭头提示框总结实例
无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框. 1.通过border属性思路:两个三角形,通过定位使 ...
Uni-app中几种常用的提示框
1.成功提示框提交表单的时候,提交成功弹出的提示框. uni.showToast({title: '提交成功',duration: 2000 }); 2.加载框 uni.showLoading({t ...
JavaScript的三种弹出提示框(alert、confirm、prompt)
三种提示框 alert () confirm() prompt () alert () alert()方法是显示一条弹出提示消息和确认按钮的警告框. 需要注意的是 :alert()是一个阻塞的函数,如 ...
微信小程序的几种弹出提示框
1.wx.showToast 消息提示框 //icon:success 成功图标,loading 加载图标 (7个汉字长度),none不显示(两行文字) //image:设置自定义图标,优先级高于ic ...
android 弹窗有边框_android中常用的弹出提示框
我们在平时做开发的时候,免不了会用到各种各样的对话框,相信有过其他平台开发经验的朋友都会知道,大部分的平台都只提供了几个最简单的实现,如果我们想实现自己特定需求的对话框,大家可能首先会想到,通过继承等 ...
window.location.reload() 刷新页面时，如何不弹出提示框
reload时是会弹出刷新的窗口的改为window.location.href='url'就可以了技术提供:武汉信息网娱乐提供:027游戏攻略网转载于:https://www.cnblogs. ...
jbox ajax,JBox演示30种不同的调用方法
jBox 是一款基于 jQuery 的多功能对话框插件,有alert警告框.confirm确认框和prompt输入对话框等,并且兼容 IE6+.Firefox.Chrome.Safari.Opera ...
JavaScript 弹窗(对话框)警告框、确认框、提示框.
JavaScript 弹窗(对话框) 三种消息框:警告框.确认框.提示框. 1. 警告框警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: wi ...

swal 弹窗html页面,SweetAlert - 演示6种不同的提示框效果

swal 弹窗html页面,SweetAlert - 演示6种不同的提示框效果相关推荐

最新文章

热门文章