Can I have multiple Sweet Alert 2 PopUps?

Question

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?

Answer 1

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