Использование SweetAlert2 в качестве всплывающего окна при загрузке страницы

Я пытаюсь использовать SweetAlert2 в качестве "всплывающего окна" после завершения страницы загрузка. Под наложением «всплывающее окно» находится обычное содержимое.

  • «Всплывающее окно» будет иметь 2 ссылки, по которым посетитель может щелкнуть. (Нажатие за пределами окна не закроет всплывающее окно)
  • При нажатии на любую ссылку открывается соответствующая новая вкладка.
  • Если он обнаружит, что посетитель нажал на обе ссылки, он разблокируется и перенаправит себя на другую страницу.

Как я могу этого добиться?

Ссылка:

Как добавить событие прослушиватель кнопок html в диалоговом окне sweetalert в jquery

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

javascript jquery popup sweetalert2 sweetalert
person jeremyok    schedule 10.09.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот ваше домашнее задание ;) [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();
  }
});
person Limon Monte    schedule 10.09.2016
comment
ОМГ, это чертовски круто, братан! :D - person jeremyok; 11.09.2016
comment
Большое спасибо, братан: D Я пытался загрузить его, просто поместив скрипт в тело, он хорошо загружается на ПК, но не загружается на мобильном телефоне. Должен ли я поставить что-то вроде ‹body onload= ... Я делаю это неправильно? - person jeremyok; 11.09.2016
comment
Да, странно, что с ПК все в порядке, но не загружается на iphone и android, которые я только что попробовал. Я пытался использовать скрипт на двух разных хостах, используя wordpress, но результат тот же. =/ я зашел на ваш сайт limonte.github.io/sweetalert2 на мобильном устройстве, и там все работает. мне нужно разместить скрипт с особыми параметрами или в определенном разделе? я не уверен, почему он не загружается =/ - person jeremyok; 11.09.2016
comment
я попробовал 3 моих мобильных телефона (iPhone и 2 браузера andriod-chrome), все не загружаются на моем веб-сайте, но, как ни странно, когда он загружает ваш github.io, там все в порядке. попросил нескольких человек протестировать его, и он загружается для них .. и программист, которого я попросил, выделить мне 50 долларов, чтобы исправить это .. =( - person jeremyok; 11.09.2016
comment
Измените $('body').on('click', '.swal2-modal a', (e) => { на $('body').on('click', '.swal2-modal a', function(e) {, я обновил свой ответ и jsfiddle - person Limon Monte; 11.09.2016
comment
Привет Лимонте, с Рождеством! Кстати, не могли бы вы помочь мне с этим тоже? stackoverflow.com/ вопросов/41320633/ Спасибо миллион - person jeremyok; 26.12.2016