弹出层小插件之sweetalert

Posted 2020-08-26 PeterSpeaking

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