弹出层小插件之(一)sweetalert

//弹出层小插件之(一)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.

Download files

1. 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">

2. 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!

转载于:https://www.cnblogs.com/PeterSpeaking/p/6245308.html