1

I am trying to use SweetAlert2 as a "popup box" once the page finishes loading. Underneath the "popup box" overlay is normal content.

  • The "popup box" will have 2 links that the visitor can click on.(clicking outside the box will not close the popup)
  • Upon clicking on any one of the link, it will open a respective new tab
  • If it detects visitor clicked on both links, it will unlock and redirect itself to another page.

How can I achieve this?

Reference:

How to add event listener for html buttons in sweetalert dialog box in jquery

`http://codepen.io/html5andblog/pen/jPzPWj` (this is good but it doesn't onload and redirect)
Limon Monte
  • 52,539
  • 45
  • 182
  • 213
jeremyok
  • 121
  • 2
  • 8

1 Answers1

1

Here's your homework ;) [JSFIDDLE]

swal({
  html: 
    '<a href="http://example1.com" id="link1" target="_blank">link 1</a><br>' + 
    '<a href="http://example2.com" id="link2" target="_blank">link 2</a>',
  confirmButtonText: 'Continue >',
  allowOutsideClick: false,
  allowEscapeKey: false
});

// disable "Continue >" button on load
swal.disableButtons();

// handle clicks and enable "Continue >" button when all links are clicked
var clickedLinks = [];
$('body').on('click', '.swal2-modal a', function(e) {
  var link = e.target;
  if (clickedLinks.indexOf(link) === -1) {
    clickedLinks.push(link);
  }
  // when all links are clicked enable "Continue >" button
  if (clickedLinks.length === $('.swal2-modal a').size()) {
    swal.enableButtons();
  }
});
Limon Monte
  • 52,539
  • 45
  • 182
  • 213
  • OMG, this is freaking awesome bro! :D – jeremyok Sep 11 '16 at 00:44
  • Thank you so much bro :D I tried loading it just by putting the script in the body, it loads well on PC, but it doesn't load on mobile. Should i put something like – jeremyok Sep 11 '16 at 03:13
  • Yes, it's weird that pc is fine but doesnt load on iphone and andriod that i tried just now. i tried using the script on 2 different host using wordpress but same result. =/ i went to your https://limonte.github.io/sweetalert2/ on mobile and it works on there. do i need to place the script using special parameters or in specific section? im not sure what's causing it not to load =/ – jeremyok Sep 11 '16 at 11:00
  • i tried 3 of my mobile(iphone and 2 andriod-chrome browser), all doesnt load on my website, but strangely when it loads your github.io, there it is fine. asked a few person to test it and it loads for them.. and a programmer i asked quote me $50 to fix this.. =( – jeremyok Sep 11 '16 at 15:42
  • Change `$('body').on('click', '.swal2-modal a', (e) => {`, to `$('body').on('click', '.swal2-modal a', function(e) {`, I've updated my answer and jsfiddle – Limon Monte Sep 11 '16 at 19:04
  • hey limonte , merry christmas! btw could you help me with this too? http://stackoverflow.com/questions/41320633/using-sweetalert2-as-exit-intent-opt-in-form Thanks a million – jeremyok Dec 26 '16 at 01:36