Можно ли связать кнопку, чтобы перейти на другую страницу и открыть на ней модал?

Question

Мне было интересно, можно ли связать кнопку с модальным на другой странице, так что в основном, когда вы нажимаете кнопку, загружается другая страница (в новой вкладке с целевым значением 0) и с открытым модальным на этой странице?

Answer 1

Это очень простой пример того, как сделать это с помощью jQuery:

На странице с кнопкой вам нужна нормальная ссылка и атрибут data-modal="modal-id" с идентификатором вашего модала.

page1.html:

    <a class="open-modal" href="page2.html" data-modal="modal-ipsum" target="_blank">
      <button>Open Modal</button>
    </a>

На странице, которая открывается при нажатии кнопки, вам нужен модал с тем же идентификатором, который вы установили ранее в атрибуте data-modal:

page2.html:

    <div class="modal" id="modal-ipsum">
      <h2>This is Modal Ipsum</h2>
    </div>

Затем в вашем файле JS:

main.js:

    $(".open-modal").click(function(e){
      e.preventDefault();

      var modal = $(this).data("modal");
      var page = $(this).attr("href");

      localStorage.setItem('modal', modal);

      window.location.href = page;
    });

    if ("modal" in localStorage) {
      var modal = localStorage.getItem('modal');

      $("#" + modal).fadeIn();
    }

Что происходит, когда вы щелкаете ссылку с классом open-modal, он устанавливает ключ со значением modal-ipsum в вашем localStorage и затем переходит на связанную страницу.

На вашемНа 2-й странице вам нужно связать файл JS.Когда документ готов, он проверяет, содержит ли localStorage элемент с именем modal.Если это так, то в модале он исчезает с кодом id #modal-ipsum.

, код не проверен

Это всего лишь некоторая помощь для начала работы.В следующий раз попробуйте что-нибудь, а затем обратитесь за помощью к SO с вашим кодом, чтобы мы могли помочь вам более конкретно.