How to add close button in SweetAlert pop up

Question

I have used the SweetAlert library for displaying a pop up in my application. This is my code

swal({
    title: "Are you sure?",
    text: "Test message?",
    type: "info",
    showCancelButton: true,
    focusConfirm: false,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes",
    cancelButtonText: "No"
}, function (isConfirm) {})

I need to add a close button in top right corner. Based on documentation, the close button available only for the SweetAlert2 library.

Is it possible to add close button in the SweetAlert1 library?

It seems you use AngularJS. Why not use **ngSweetAlert** with? https://github.com/oitozero/ngSweetAlert — Zooly, Sep 27 '17 at 12:06
i already used sweetalert in my application. i cant use any other libraries — Abdul Manaf, Sep 27 '17 at 12:18
There's a cancel button also, which can be also used to close popup — Parag Jadhav, Sep 28 '17 at 04:10

score 12 · Answer 1 · edited Jan 26 '18 at 08:09

swal({
title: "Are you sure?",
text: "Test message?",
type: "info",
showCancelButton: true,
focusConfirm: false,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
showCloseButton: true,

Just add showCloseButton: true and this will show the close X icon in the top right corner of the pop up.

Source: See the "Custom HTML description and buttons with ARIA labels" example on SweetAlerts2 Docs

Note it is not available in SweetAlert1 library which is now deprecated, I would suggest using SweetAlert2.

score 10 · Answer 2 · answered May 04 '18 at 17:30

You can define a mySwal wrapper that checks for a showCloseButton param.

Here's an example for v2.1.0 of the original SweetAlert library:

mySwal = function() {
  swal(arguments[0]);
  if (arguments[0].showCloseButton) {
    closeButton = document.createElement('button');
    closeButton.className = 'swal2-close';
    closeButton.onclick = function() { swal.close(); };
    closeButton.textContent = '×';
    modal = document.querySelector('.swal-modal');
    modal.appendChild(closeButton);
  }
}

mySwal({
  title: "Are you sure?",
  text: "Test message?",
  icon: "info", /* type: "info", */
  buttons: [
    "No", /* showCancelButton: true, cancelButtonText: "No", */
    "Yes" /* confirmButtonText: "Yes", */
  ],
  focusConfirm: false,
  showCloseButton: true
});

.swal-button--confirm {
  background-color: #dd6b55; /* confirmButtonColor: "#DD6B55", */
}

.swal-modal .swal2-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.2em;
  height: 1.2em;
  transition: color 0.1s ease-out;
  border: none;
  background: transparent;
  color: #cccccc;
  font-family: serif;
  font-size: 40px;
  cursor: pointer;
}

.swal-modal .swal2-close:hover {
  color: #f27474;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>

How to add close button in SweetAlert pop up

2 Answers2