SweetAlert2

Sweet Alert2 is a responsive and editable open source pop-up library written in Javascript.

With its easy integration, design and functionality, it is actively used on many websites and is constantly updated and developed.

Sweetalert2 makes the job very easy for error and confirmation messages after a transaction on web pages, buttons in form fields or pop up messages after any event.

The browser’s default Javascript page pop up message is more primitive, as in the example below. The Sweet Alert2 pop-up message, on the other hand, is a more pleasing and eye-catching structure.

Import Sweet Alert2 Codes

In order for the codes in the library to be activated, the script below must be added to the website.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>

Or you can add CSS and JS codes separately with the scripts below.

CSS code to add between <head></head> tags:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css">

Script code to be added to the page (Adding it to the bottom of the page will be advantageous in terms of site speed):

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.js"></script>

How to Use Sweet Alert2

Basic

Just a pop up with a simple message.

Swal.fire('Any fool can use a computer')

Text With Title

Pop message with title and description text.

Swal.fire(
  'Junior to Expert',
  'juniortoexpert.com',  
  'success'
)

The icon on the pop-up that opens with the value entered in the ‘success’ field is determined. There are 5 different icon options as ‘success’, ‘error’, ‘warning’, ‘info’, ‘question’.

Picture Pop Up

Type of message that contains a picture in a pop-up. The “imageURL” attribute indicates the link of the image, the “imageWidth” and “imageHeight” the width-height of the image, and the “imageAlt” the alt tag of the image.

Swal.fire({
  title: 'Junior to Expert!',
  text: 'juniortoexpert.com Sweet Alert2',
  imageUrl: 'https://juniortoexpert.com/wp-content/uploads/juniortoexpert.jpeg',
  imageWidth: 400,
  imageHeight: 400,
  imageAlt: 'Junior to Expert',
})

Pop Up With Position Specified On The Page

With the “position” value, the pop-up opened on the page can be placed in the specified position. Values that allow the pop-up window to be positioned on the page;

“top”,
“top-start”,
“top-end”,
“center”,
“center-start”,
“center-end”,
“bottom”,
“bottom-start”,
“bottom-end”

Swal.fire({
  position: 'top-start',
  icon: 'success',
  title: 'Junior to Expert',
  showConfirmButton: false,
  timer: 1500
})

With the timer: value, the duration of the pop-up window that opens can be determined. Since there is no need to close the window button because there is a timer, the button is disabled with the value showConfirmButton: false.

Pop Up With Custom HTML Added

The specified HTML setup can be placed in the pop-up window opened with the html: value.

Swal.fire({
  title: 'Junior to Expert',
  icon: 'info',
  html:
    'Sweet Alert2 Javascript pop-up library ' +
    '<a href="https://juniortoexpert.com">juniortoexpert.com</a>',
  showCloseButton: true,
  showCancelButton: true
})

Approval Pop Up

Pop-up type that receives confirmation from the user for an action.

Swal.fire({
  title: 'Are you sure?',
  text: "You cannot undo this action!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, I am sure!'
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'The file you approved has been deleted.',
      'success'
    )
  }
})

Animated Pop Up

Animation usage while pop-up window is opened and closed is provided with showClass and hideClass values.

Swal.fire({
  title: 'Junior to Expert',
  showClass: {
    popup: 'animate__animated animate__fadeInDown'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOutUp'
  }
})

Note: Animation works with Animate.css support, animation does not activate without adding Animate.css codes to the page.

Sweetalert2 Icons

The “icon:” property “success”, “error”, “warning”, “info”, “question” variables are used in the code field to specify icons as follows in pop-up messages.

Success

Error

Warning

Info

Question

Source: https://sweetalert2.github.io/