简体   繁体   English

使用SweetAlert2作为页面加载时的弹出窗口

[英]Using SweetAlert2 as popup on page load

I am trying to use SweetAlert2 as a "popup box" once the page finishes loading. 页面加载完成后,我试图将SweetAlert2用作“弹出框”。 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 如何在jquery的sweetalert对话框中为html按钮添加事件侦听器

 `http://codepen.io/html5andblog/pen/jPzPWj` (this is good but it doesn't onload and redirect) 

Here's your homework ;) [JSFIDDLE] 这是您的作业;) [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();
  }
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM