This article is a mirror article of machine translation, please click here to jump to the original article.

View: 20094|Reply: 2

[HTML/HTML5] A very beautiful alert message box SweetAlert

[Copy link]
Posted on 12/24/2015 12:00:48 PM | | | |





Sweet Alert is a beautiful remind effect that replaces the traditional Javascrip{filter}t Alert. SweetAlert automatically centers and aligns to the center of the page, so it looks great whether you're using a desktop computer, phone, or tablet. In addition, a wide range of custom configuration options are available for flexible control.

How to use:

Introducing:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Then, a simple example:

swal({   title: "Error!",   text: "Here's my error message!",   type: "error",   confirmButtonText: "Cool" });
Attached file package: sweetalert-master.zip (650.13 KB, Number of downloads: 9, 售价: 2 粒MB)

Argument
Default value

Descrip{filter}tion
titlenull (required)The title of the modal. It can either be added to the object under the key "title" or passed as the first parameter of the function.
textnullA descrip{filter}tion for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function.
typenullThe type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". You can also set it as "input" to get a prompt modal. It can either be put in the object under the key "type" or passed as the third parameter of the function.
allowEscapeKeytrueIf set totrue, the user can dismiss the modal by pressing the Escape key.
customClassnullA custom CSS class for the modal. It can be added to the object under the key "customClass".
allowOutsideClickfalseIf set totrue, the user can dismiss the modal by clicking outside it.
showCancelButtonfalseIf set totrue, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.
showConfirmButtontrueIf set tofalse, the "OK/Confirm"-button will be hidden. Make sure you set a timer or set allowOutsideClick to true when using this, in order not to annoy the user.
confirmButtonText"OK"Use this to change the text on the "Confirm"-button. If showCancelButton is set as true, the confirm button will automatically show "Confirm" instead of "OK".
confirmButtonColor"#AEDEF4"Use this to change the background color of the "Confirm"-button (must be a HEX value).
cancelButtonText"Cancel"Use this to change the text on the "Cancel"-button.
closeOnConfirmtrueSet tofalseif you want the modal to stay open even if the user presses the "Confirm"-button. This is especially useful if the function attached to the "Confirm"-button is another SweetAlert.
closeOnCanceltrueSame as closeOnConfirm, but for the cancel button.
imageUrlnullAdd a customized icon for the modal. Should contain a string with the path to the image.
imageSize"80x80"If imageUrl is set, you can specify imageSize to describes how big you want the icon to be in px. Pass in a string with two values separated by an "x". The first value is the width, the second is the height.
timernullAuto close timer of the modal. Set in ms (milliseconds).
htmlfalseIf set to true, will not escape title and text parameters. (Set to false if you're worried about XSS attacks.)
animationtrueIf set tofalse, the modal's animation will be disabled. Possible (string) values :pop(default when animation set to true),slide-from-top, slide-from-bottom
inputType"text"Change the type of the input field when usingtype: "input"(this can be useful if you want users to type in their password for example).
inputPlaceholdernullWhen using the input-type, you can specify a placeholder to help the user.
inputValuenullSpecify a default text value that you want your input to show when usingtype: "input"
showLoaderOnConfirmfalseSet totrueto disable the buttons and show that something is loading.





Previous:HTTPS Those Things (1) HTTPS Principle (Reprint)
Next:aspx vs. mvc page captcha
 Landlord| Posted on 2/25/2017 6:36:23 PM |
Posted on 12/8/2017 3:20:55 PM |
layui's pop frame also feels good to use
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.

Mail To:help@itsvse.com