The JavaScript SweetAlert plug-in implements the cool message warning box and the sweetalert cool.

The JavaScript SweetAlert plug-in implements the cool message warning box and the sweetalert cool.

Today, we recommend a nice and awesome message warning box-SweetAlert. SweetAlert is a native js prompt box that does not require jQuery support. The style is similar to bootstrap. The prompt box is not only attractive, but can also be customized. It supports setting the prompt box title, prompt type, content display image, confirmation cancel button text, and callback function after clicking. Compared with traditional alert:

SweetAlert can automatically center pages, supports desktop environments, mobile terminals and tablets, and is highly customized. Next let's take a look at its specific use!

HTML

First, introduce the corresponding js and css. This plug-in does not require the support of the jQuery plug-in:

<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.css"/><script src="http://sandbox.runjs.cn/uploads/rs/499/ixc5vbvz/sweetalert.min.js"></script>

Then place 6 different buttons:

<Div class = "demo_1"> basic example: <button> click here </button> </div> <div class = "demo_2"> success prompt: <button> click here </button> </div> <div class = "demo_3"> the following error occurs: <button> click here </button> </div> <div class = "demo_4"> confirm: <button> click here </button> </div> <div class = "demo_5"> definition content: <button> click here </button> </div> <div class = "demo_6"> confirm the input: <button> click here </button> </div>

JavaScript

Define js events:

$ (Function () {$ (". demo_1 button"). click (function () {swal ("This is an information prompt box! ") ;}); $ (". Demo_2 button "). click (function () {swal (" Good! "," A prompt box is displayed, "success") ;}); $ (". demo_3 button"). click (function () {swal ("OMG! "," An error prompt box "," error ") ;}; $ (". demo_4 button "). click (function () {swal ({title: "Are you sure you want to delete it? ", Text:" Are you sure you want to delete this data? ", Type:" warning ", showCancelButton: true, closeOnConfirm: false, confirmButtonText:" Yes, I want to delete ", confirmButtonColor:" # ec6c62 "}, function () {$. ajax ({url: "do. php ", type:" DELETE "}). done (function (data) {swal ("operation successful! "," Data deleted successfully! "," Success ") ;}). error (function (data) {swal (" OMG "," delete operation failed! "," Error ") ;};}) ;};) (". demo_5 button "). click (function () {swal ({title:" Good! ", Text: 'custom <span style =" color: red "> image </span> and <a href =" # "> HTML content </a>. <Br/> it is automatically disabled in 5 seconds. ', ImageUrl: "images/thumbs-up.jpg", html: true, timer: 5000, showConfirmButton: false (". demo_6 button "). click (function () {swal ({title: "input box", text: "Here you can enter and confirm:", type: "input", showCancelButton: true, closeOnConfirm: false, animation: "slide-from-top", inputPlaceholder: "enter something here"}, function (inputValue) {if (inputValue = false) return false; if (inputValue = "") {swal. showInputError ("Please input! "); Return false} swal (" Great! "," You entered: "+ inputValue," success ");});});});

Articles you may be interested in:

• Jquery SweetAlert plug-in implements a responsive prompt box