推荐一个提示框框架 SweetAlert

最新推荐文章于 2021-03-16 19:38:26 发布

原创最新推荐文章于 2021-03-16 19:38:26 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

知识文档专栏收录该内容

516 篇文章

订阅专栏

本文介绍了一个基于 jQuery 的 SweetAlert 弹窗插件的使用方法，包括基本用法和 API 参数配置，展示了如何创建不同类型的弹窗对话框。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="dist\sweetalert-dev.js"></script>  
<link rel="stylesheet" href="dist\sweetalert.css">
<script>
$(function (){
$("#div1").click(function() { 
   swal("这是一个信息提示框!"); 
  
});
});
</script>
<body>
<div id="div1">测试1</div>
</body>
</html>

详细参数

swal({ 
    title: "您确定要删除吗？", 
    text: "您确定要删除这条数据？", 
    type: "warning", 
    showCancelButton: true, 
    closeOnConfirm: false, 
    confirmButtonText: "是的，我要删除", 
    confirmButtonColor: "#ec6c62" 
}

API

参数	描述	默认值
title	提示框标题	-
text	提示内容	-
type	提示类型，有：success（成功），error（错误），warning（警告），input（输入）。	-
showCancelButton	是否显示“取消”按钮。	-
animation	提示框弹出时的动画效果，如slide-from-top（从顶部滑下）等	-
html	是否支持html内容。	-
timer	设置自动关闭提示框时间（毫秒）。	-
showConfirmButton	是否显示确定按钮。	-
confirmButtonText	定义确定按钮文本内容。	-
imageUrl	定义弹出框中的图片地址。