GOOCODE - Find your code/scripts

2 SweetAlert can replace the native function alert and confirm showing the pop-up boxes, it will prompt box landscaping, and allows customization, support setting the prompt box title, alert type, content display pictures, confirmation cancel button text, click after the callback function, etc.


Ready to work
First we have to put SweetAlert widget js files and css files into the page.

<script src="sweetalert.min.js"></script> 
<link rel="stylesheet" href="sweetalert.css"> 

This paper uses the examples of jQuery library, jQuery library also introduced.

Basic use
On the page, you need to call the pop-up prompt box binding elements word, such as clicking a button to pop up:

	$(".demo_1 button").click(function(){
		swal("This is a message box!");
	});

Confirmation prompt
When we operate delete other dangerous operations, generally before deleting a confirmation box will pop up, as the javascript confirm () function, click on the OK button, and then the next step really delete operations.

	$(".demo_4 button").click(function(){
		 swal({
			title: "Are you sure you want to delete?", 
			text: "Are you sure you want to delete this data?", 
			type: "warning",
			showCancelButton: true,
			closeOnConfirm: false,
			confirmButtonText: "Yes, I do.",
			confirmButtonColor: "#ec6c62"
			}, function() {
				$.ajax({
					url: "do.php",
					type: "DELETE"
				}).done(function(data) {
					swal("Successful operation!", "Data deleted!", "success");
				}).error(function(data) {
					swal("OMG", "Delete operation failed!", "error");
				});
			});
	})

The above example code implements a process to confirm the deletion of data. Click the button, pop-up boxes, requiring the user to confirm, if the point was confirmed, it will send to the background do.php ajax request, do.php proceeds corresponding data delete operation, it will return to the front page after deleting data, js according to the data returned to prompt the user operation result information.

Option
SweetAlert plug-in provides a lot of options to set, the demand can be met by project developers customize many attribute parameters and other information.
title: Tip box title.
text: Tips content.
type: prompt type, there are: success (success), error (error), warning (warning), input (input).
showCancelButton: whether the "Cancel" button.
animation: animation prompt box pops up, such as the slide-from-top (slide down from the top) and the like.
html: support html content.
timer: set up automatic shutdown balloon time (in milliseconds).
showConfirmButton: whether to display the OK button.
confirmButtonText: definition of the OK button text.
imageUrl: the definition of pop-up box picture address.