» » Beautiful and practical tip box plugin - SweetAlert


Beautiful and practical tip box plugin - SweetAlert

Author: bamboo06 on 8-11-2015, 22:07, views: 2753

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(){
			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() {
					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.

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.

Category: Javascript

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
  • 0 Articles
20 October 2017 05:54


  • Group: Guests
  • –†Registered date: --
  • Status:
Most of the people want to see the headings and news of the events that will be going to held in the society. If you're the person who is seeking the news regarding this then you can consult with the bestessays.com in order to get the proper information about any festival and program.

  • 0 Articles
24 December 2017 09:24


  • Group: Members
  • –†Registered date: 24.12.2017
  • Status: Currently Offline
This is really very useful plugin. I tried to install it for https://www.crunchbase.com/organization/edusson and the result was great! I like it so much and recommend it to others!

Comment on the news site is possible only within (days) days from the date of publication.