<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>漂亮的jQuery模态消息对话框插件SweetAlert2</title>
<link rel="stylesheet" href="./example/example.css">
<link rel="stylesheet" href="./example/buttons.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="lib/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="./dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="./dist/sweetalert2.min.css">
<!--
<script src="https://cdn.jsdelivr.net/es6-promise/latest/es6-promise.min.js"></script>
-->
<!--
<script src="https://cdn.jsdelivr.net/promise.prototype.finally/1.0.1/finally.js"></script>
-->
</head>
<body>
<header>
<h1>Sweet<span>Alert</span>2</h1>
</header>
<p>下面是一个默认的浏览器弹出对话框和<strong>SweetAlert2</strong>对话框的比较效果。</p>
<div class="showcase normal">
<h4>浏览器内置的对话框</h4>
<button>显示一个错误信息</button>
<h5>Code:</h5>
<pre><span class="func">alert</span>(<span class="str">'Oops! Something went wrong!'</span>)</pre>
<div class="vs-icon"></div>
</div>
<div class="showcase sweet">
<h4>Sweet<span>Alert</span>2</h4>
<button>显示一个错误信息</button>
<h5>Code:</h5>
<pre>
sweetAlert(
<span class="str">'Oops...'</span>,
<span class="str">'Something went wrong!'</span>,
<span class="str">'error'</span>
)</pre>
</div>
<p>Pretty cool huh? SweetAlert2 automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!</p>
<!-- Examples -->
<h3>More examples</h3>
<p class="center">In these examples, we're using the shorthand function <strong>swal</strong>.</p>
<ul class="examples">
<li class="message">
<div class="ui">
<p>基本信息对话框</p>
<button>Try me!</button>
</div>
<pre>swal(<span class="str">'Any fool can use a computer'</span>)</pre>
</li>
<li class="title-text">
<div class="ui">
<p>带标题的信息对话框</p>
<button>Try me!</button>
</div>
<pre>
swal(
<span class="str">'The Internet?'</span>,
<span class="str">'That thing is still around?'</span>,
<span class="str">'question'</span>
)</pre>
</li>
<li class="success">
<div class="ui">
<p>成功信息对话框</p>
<button>Try me!</button>
</div>
<pre>
swal(
<span class="str">'Good job!'</span>,
<span class="str">'You clicked the button!'</span>,
<span class="str">'success'</span>
)</pre>
</li>
<li class="timer">
<div class="ui">
<p>自动关闭的对话框</p>
<button>Try me!</button>
</div>
<pre>
swal({
title: <span class="str">'Auto close alert!'</span>,
text: <span class="str">'I will close in 2 seconds.'</span>,
timer: <span class="val">2000</span>
})</pre>
</li>
<li class="html">
<div class="ui">
<p>自定义HTML标签和按钮的对话框</p>
<button>Try me!</button>
</div>
<pre>
swal({
title: <span class="str">'<i>HTML</i> <u>example</u>'</span>,
type: <span class="str">'info'</span>,
html:
<span class="str">'You can use <b>bold text</b>, '</span> +
<span class="str">'<a href="//github.com">links</a> '</span> +
<span class="str">'and other HTML tags'</span>,
showCloseButton: <span class="val">true</span>,
showCancelButton: <span class="val">true</span>,
confirmButtonText:
<span class="str">'<i class="fa fa-thumbs-up"></i> Great!'</span>,
cancelButtonText:
<span class="str">'<i class="fa fa-thumbs-down"></i>'</span>
})</pre>
</li>
<li class="html-jquery">
<div class="ui">
<p>jQuery HTML</p>
<button>Try me!</button>
</div>
<pre>
swal({
title: <span class="str">'jQuery HTML example'</span>,
html: $(<span class="str">'<div>'</span>)
.addClass(<span class="str">'some-class'</span>)
.text(<span class="str">'jQuery is everywhere.'</span>)
})</pre>
</li>
<li class="warning confirm">
<div class="ui">
<p>一个警告信息对话框，“确认”按钮带有回调函数</p>
<button>Try me!</button>
</div>
<pre>
swal({
title: <span class="str">'Are you sure?'</span>,
text: <span class="str">"You won't be able to revert this!"</span>,
type: <span class="str">'warning'</span>,
showCancelButton: <span class="val">true</span>,
confirmButtonColor: <span class="str">'#3085d6'</span>,
cancelButtonColor: <span class="str">'#d33'</span>,
confirmButtonText: <span class="str">'Yes, delete it!'</span>
}).then(<span class="func"><i>function</i></span>(isConfirm) {
<span class="tag">if</span> (isConfirm) {
swal(
<span class="str">'Deleted!'</span>,
<span class="str">'Your file has been deleted.'</span>,
<span class="str">'success'</span>
);
}
})</pre>
</li>
<li class="warning cancel">
<div class="ui">
<p>... and by passing a parameter, you can execute something else for "Cancel".</p>
<button>Try me!</button>
</div>
<pre>
swal({
title: <span class="str">'Are you sure?'</span>,
text: <span class="str">"You won't be able to revert this!"</span>,
type: <span class="str">'warning'</span>,
showCancelButton: <span class="val">true</span>,
confirmButtonColor: <span class="str">'#3085d6'</span>,
cancelButtonColor: <span class="str">'#d33'</span>,
confirmButtonText: <span class="str">'Yes, delete it!'</span>,
cancelButtonText: <span class="str">'No, cancel!'</span>,
confirmButtonClass: <span class="str">'btn btn-success'</span>,
cancelButtonClass: <span class="str">'btn btn-danger'</span>,
buttonsStyling: <span class="val">false</span>
}).then(<span class="func"><i>function</i></span>(isConfirm) {
<span class="tag">if</span> (isConfirm === <span class="val">true</span>) {
swal(
<span class="str">'Deleted!'</span>,
<span class="str">'Your file has been deleted.'</span>,
<span class="str">'success'</span>
);
} <span class="tag">else if</span> (isConfirm === <span class="val">false</span>) {
swal(
<span class="str">'Cancelled'</span>,
<span class="str">'Your imaginary file is safe :)'</span>,
<span class="str">'error'</span>
);
} <span class="tag">else</span> {
<span class="comment">// Esc, close button or outside click</span>
<span class="comment">// isConfirm is undefined</span>
}
})</pre>
</li>
<li class="custom-icon">
<div class="ui">
<p>A message with a custom icon and CSS animation disabled</p>
<button>Try me!</button>
</div>
<pre>
swal({
title: <span class="str">'Sweet!'</span>,
text: <span class="str">'Modal with a custom image.'</span>,
imageUrl: <span class="str">'https://unsplash.it/400/200'</span>,
imageWidth: <span class="val">400</span>,
imageHeight: <span class="val">200</span>,
animation: <span class="val">false</span>
})</pre>
</li>
<li class="custom-width-padding-background">
<div class="ui">
<p>A message with custom width, padding and background</p>
<button>Try me!</button>
</div>
<pre>
swal({
title: <span class="str">'Custom width, padding, background.'</span>,
width: <span class="val">600</span>,
padding: <span class="val">100</span>,
background: <span class="str">'#fff url(//bit.ly/1Nqn9HU)'</span>
})</pre>
</li>
<li class="ajax-request" id="ajax-request">
<div class="ui">
<p>Ajax request example</p>
<button>Try me!</button>
</div>
<pre>
swal({
title: <span class="str">'Submit email to run ajax request'</span>,
input: <span class="str">'email'</span>,
showCancelButton: <span class="val">true</span>,
confirmButtonText: <span class="str">'Submit'</span>,
showLoaderOnConfirm: <span class="val">true</span>,
preConfirm: <span class="func"><i>function</i></span>() {
<span clas
漂亮的jQuery模态消息对话框插件SweetAlert2.zip
版权申诉
93 浏览量
2023-09-21
00:00:34
上传
评论
收藏 111KB ZIP 举报
漂亮的jQuery模态消息对话框插件SweetAlert2.zip （23个子文件） 
lib 
jquery-2.1.1.min.js 82KB src sweetalert2.js 27KB utils dom.js 6KB utils.js 790B classes.js 526B default.js 3KB sweetalert2.scss 10KB dist sweetalert2.css 15KB sweetalert2.common.js 35KB sweetalert2.js 37KB sweetalert2.min.js 16KB sweetalert2.min.css 10KB
index.html 27KB images 
swal2-error.png 3KB swal2-success.png 3KB vs_icon@2x.png 8KB swal2-warning.png 3KB vs_icon.png 4KB swal2-info.png 5KB swal2-question.png 3KB example example.scss 7KB example.css 7KB buttons.css 9KB资源评论
