Can I have multiple Sweet Alert 2 PopUps?

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?

1 Answer

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