Sweetalert2

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes.

For more, please visit the plugin's official site .

A basic message

Preview

$("#show-example-btn1").on("click", function () {
  Swal.fire({ text: "SweetAlert2 is working" });
});

<button class="btn btn-primary" id="show-example-btn1">Try Me</button>

A title with a text under

Preview

$("#show-example-btn2").on("click", function () {
  Swal.fire({
    title: "The Internet?",
    text: "That thing is still around?",
    icon: "question",
  });
});

<button class="btn btn-primary" id="show-example-btn2">Try Me</button>

A modal with a title, an error icon, a text, and a footer

Preview

$("#show-example-btn3").on("click", function () {
  Swal.fire({
    icon: "error",
    title: "Oops...",
    text: "Something went wrong!",
    footer: '<a href="#">Why do I have this issue?</a>',
  });
});

<button class="btn btn-primary" id="show-example-btn3">Try Me</button>

A successful modal example

Preview

$("#show-example-btn4").on("click", function () {
  Swal.fire({
    icon: "success",
    title: "Good job!",
    text: "You clicked the button!",
  });
});

<button class="btn btn-primary" id="show-example-btn4">Try Me</button>

A confirm dialog, with a function attached to the "Confirm"-button

Preview

$("#show-example-btn5").on("click", function () {
  Swal.fire({
    icon: "warning",
    title: "Are you sure?",
    text: "You won’t be able to revert this!",
    showCancelButton: true,
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel",
  }).then((result) => {
    if (result.isConfirmed) {
      Swal.fire({
        title: "Deleted!",
        text: "Your file has been deleted.",
        icon: "success",
      });
    }
  });
});

<button class="btn btn-primary" id="show-example-btn5">Try Me</button>

A message with a custom image

Preview

Swal.fire({
  title: "Sweet!",
  text: "Modal with a custom image.",
  imageUrl: "https://picsum.photos/400/200",
  imageHeight: 200,
  imageAlt: "Custom image",
});

<button class="btn btn-primary" id="show-example-btn6">Try Me</button>

An example with an input form element

Preview

Swal.fire({
  title: "Submit your Github username",
  input: "text",
});

<button class="btn btn-primary" id="show-example-btn7">Try Me</button>

An example with an range form element

Preview

Swal.fire({
  title: "How old are you?",
  icon: "question",
  input: "range",
  inputValue: "50",
  inputLabel: "Your age",
});

<button class="btn btn-primary" id="show-example-btn8">Try Me</button>

About Privacy Contact