1

ページの読み込みが完了したら、 SweetAlert2を「ポップアップ ボックス」として使用しようとしています。「ポップアップ ボックス」オーバーレイの下には、通常のコンテンツがあります。

  • 「ポップアップ ボックス」には、訪問者がクリックできる2 つのリンクがあります (ボックスの外側をクリックしても、ポップアップは閉じません) 。
  • いずれかのリンクをクリックすると、それぞれの新しいタブが開きます
  • 訪問者が両方のリンクをクリックしたことを検出すると、ロックが解除され、別のページにリダイレクトされます。

どうすればこれを達成できますか？

参照：

jqueryのsweetalertダイアログボックスにhtmlボタンのイベントリスナーを追加する方法

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

1 に答える 1

1

これが宿題です ;) [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();
  }
});
于 2016-09-10T20:06:49.597 に答える