CODEWITHSUNDEEP
javascriptalertsweetalertsweetalert2
Giuls
Giuls

Reputation: 580

Sweetalert delay popup from opening

I am trying to delay a SweetAlert popup to not display for a few seconds once it has been triggered.

e.g. User performs action on webpage to trigger SweetAlert, but instead of displaying instantly, it wait 2 seconds and then displays. - I've been researching various ways to do this, but no luck...I think maybe setTimeout is needed?

Here is my SweetAlert function which is working so far:

if( response == 10 ){
    swal({
      type: 'success',
      title: 'YOUR BALANCED BOX IS FULL',
      text: 'Youve added the recommended amount of items for your plan!',
      allowOutsideClick: false,
      showCancelButton: true,
      cancelButtonText: "Modify Selection",
      cancelButtonColor: '#d33',
      showConfirmButton: true,
      confirmButtonColor: '#61ce70',
      confirmButtonText: "Proceed To Cart",
    }).then((result) => {
        if (result.value) {
            window.location = "/basket/";
        }
    }) 
}

Any help appreciated!

Upvotes: 4

Views: 5343

Answers (2)

Giuls
Giuls

Reputation: 580

SPECIFIC SWEETALERT 2 ANSWER:

Above code logic answer from Leo is correct. Am sharing the final version with SweetAlert 2 with setTimeout as a function added to delay the popup from opening.

The setTimeout function wraps around the entire SweetAlert 2 function and the timer is set at the bottom of the end of the function (in this case to 3000).

Hope this helps anyone looking to do the same!

    setTimeout(function(){swal({
  type: 'success',
  title: 'YOUR BALANCED BOX IS FULL',
  text: 'Youve added the recommended amount of items for your plan!',
  allowOutsideClick: false,
  showCancelButton: true,
  cancelButtonText: "Modify Selection",
  cancelButtonColor: '#d33',
  showConfirmButton: true,
  confirmButtonColor: '#61ce70',
  confirmButtonText: "Proceed To Cart",
}).then((result) => {
  if (result.value) {
    window.location = "/basket/";
  }
})},3000);

Upvotes: 2

Leo
Leo

Reputation: 318

Yes indeed you can use setTimeout to achieve this easily, i set up a simple snippet so you can try it out!

// When button gets clicked.
$("#button").click(() => {
	// Instantely change it's text to loading..
	$("#button").text("Loading!");
  // Wait 2kms then change the text to Done!
	setTimeout(() => {
  	$("#button").text("Done!");
  }, 2000);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Event</button>

-Leo

Upvotes: 1

Related Questions