//弹出层小插件之(一)sweetalert
1.引入sweetalert.css
2.引入sweetalert.min.js
下载地址：http://t4t5.github.io/sweetalert/
官网有如下多种你需要的展示效果
More examples
In these examples, we're using the shorthand function swal to call sweetAlert.
A basic message
swal("Here's a message!")
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<link rel="stylesheet" type="text/css" href="themes/twitter.css">
Download & install
Method 1: Install through bower:
$ bower install sweetalert
Method 2: Install through NPM:
$ npm install sweetalert
Method 3: Download the sweetAlert CSS and JavaScript files.
Initialize the plugin by referencing the necessary files:
<script src="dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">Call the sweetAlert-function after the page has loaded
swal({
title: "Error!",
text: "Here's my error message!",
type: "error",
confirmButtonText: "Cool"
});
A title with a text under
swal("Here's a message!", "It's pretty, isn't it?")A success message!
swal("Good job!", "You clicked the button!", "success")A warning message, with a function attached to the "Confirm"-button...
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});... and by passing a parameter, you can execute something else for "Cancel".
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function(isConfirm){
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});A message with a custom icon
swal({
title: "Sweet!",
text: "Here's a custom image.",
imageUrl: "images/thumbs-up.jpg"
});An HTML message
swal({
title: "HTML <small>Title</small>!",
text: "A custom <span style="color:#F8BB86">html<span> message.",
html: true
});A message with auto close timer
swal({
title: "Auto close alert!",
text: "I will close in 2 seconds.",
timer: 2000,
showConfirmButton: false
});A replacement for the "prompt" function
swal({
title: "An input!",
text: "Write something interesting:",
type: "input",
showCancelButton: true,
closeOnConfirm: false,
animation: "slide-from-top",
inputPlaceholder: "Write something"
},
function(inputValue){
if (inputValue === false) return false;
if (inputValue === "") {
swal.showInputError("You need to write something!");
return false
}
swal("Nice!", "You wrote: " + inputValue, "success");
});With a loader (for AJAX request for example)
swal({
title: "Ajax request example",
text: "Submit to run ajax request",
type: "info",
showCancelButton: true,
closeOnConfirm: false,
showLoaderOnConfirm: true,
},
function(){
setTimeout(function(){
swal("Ajax request finished!");
}, 2000);
});You can also change the theme of SweetAlert!