My HTML/Javascript app uses a modal popup which I created using sweet Alert 2. Let's call this "Alert1".

Alert1 is using custom HTML and there is a button inside that HTML which I want to trigger another sweet alert 2 modal popup, we'll call this one "Alert2".

Alert2 has two options. "confirm" or "cancel" If the user clicks "cancel" I want to return to Alert1.

Here is the catch: The custom HTML for Alert1 is editable therefore, I can't just re-invoke the code that originally launched the alert, because this would show the old HTML.

This is what I have tried:

function clickButton(){ //This function will be attached to the button in Alert1
    var currentSwal = document.getElementById('swal2-content').innerHTML;
      swal({
      title: "Confirm 'Remove Script Page'",
      text:
        "Are you sure you want to remove this page from the script?",
      type: "warning",
      showConfirmButton: true,
      showCancelButton: true
    }).then(function(dismiss) {
      if (dismiss.dismiss == "cancel" || dismiss.dismiss == 'overlay') {
        swal.close;
        swal({
          html: currentSwal,
          showConfirmButton: false,
          customClass: 'swal-extra-wide',
          showCloseButton: true
        });
      } //end if
      else {
      //go ahead and delete the script page
      } //end else
    });
}//end function

My above solution does not work. It is a bit hard to explain, but basically, the HTML code gets broken and things just don't work properly.

TLDR/My question: Is there a way to have multiple SweetAlert2 alerts? (i.e. launch alert2 from alert1 and then close alert2, returning the view to alert1?

My HTML/Javascript app uses a modal popup which I created using sweet Alert 2. Let's call this "Alert1".

Alert1 is using custom HTML and there is a button inside that HTML which I want to trigger another sweet alert 2 modal popup, we'll call this one "Alert2".

Alert2 has two options. "confirm" or "cancel" If the user clicks "cancel" I want to return to Alert1.

Here is the catch: The custom HTML for Alert1 is editable therefore, I can't just re-invoke the code that originally launched the alert, because this would show the old HTML.

This is what I have tried:

function clickButton(){ //This function will be attached to the button in Alert1
    var currentSwal = document.getElementById('swal2-content').innerHTML;
      swal({
      title: "Confirm 'Remove Script Page'",
      text:
        "Are you sure you want to remove this page from the script?",
      type: "warning",
      showConfirmButton: true,
      showCancelButton: true
    }).then(function(dismiss) {
      if (dismiss.dismiss == "cancel" || dismiss.dismiss == 'overlay') {
        swal.close;
        swal({
          html: currentSwal,
          showConfirmButton: false,
          customClass: 'swal-extra-wide',
          showCloseButton: true
        });
      } //end if
      else {
      //go ahead and delete the script page
      } //end else
    });
}//end function

My above solution does not work. It is a bit hard to explain, but basically, the HTML code gets broken and things just don't work properly.

TLDR/My question: Is there a way to have multiple SweetAlert2 alerts? (i.e. launch alert2 from alert1 and then close alert2, returning the view to alert1?

• javascript
• html
• modal-dialog
• alert
• sweetalert2

• 1 I'm not entirely sure what you want to do, but have you tried using swal2 queue? You can find more about queue on sweetalert2.github.io/#chaining-modals. – G. Verni Commented Dec 10, 2018 at 17:24
• What you want is called "stacked" modals. I haven't found yet a way to solve this with SweetAlerts2. – Adrián E Commented Jul 31, 2020 at 23:08
• Does this answer your question? sweetalert2 multiple swal at the same function – Aldo Commented Feb 16, 2022 at 7:16

2 Answers 2

Yes you can ,

var modals = [];


  modals.push({title: 'title Of Modal1', text: 'text1' });

  modals.push({title: 'title Of Modal2', text: 'text2' });

swal.queue(modals);

References Question 38085851 Answer 1

make a for loop for 3 and use toast not sweet alert and it will be works