Блог

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

Я создаю страницу с помощью WordPress, что означает, что у меня нет доступа к HTML-файлу, поэтому я хочу создать его динамически. Я знаю, что структура модала должна быть следующей:

 <a href="">Newsletter</a>
<div id="modal" class="modal">
  <div class="modalContent">
    <span class="close">amp;times;</span>
    <h2></h2>
    <p></p>
  </div>
</div>
  

А затем захват этих HTML-элементов в JS-файле и функция, открывающая / закрывающая модальный и т. Д.

Однако, похоже, я не могу сделать это только с помощью JS, поскольку мне трудно определить ту иерархию, которую легко достичь в HTML, поместив промежутки в divs и так далее. Любая помощь приветствуется!

 function newsletterModal() {
    const btn = document.querySelector("#menu-item-1706");
    btn.addEventListener("click", (e) => {
    e.preventDefault(); 

    // create modal
    const modal = document.createElement("div");
    modal.classList.add("modal");
    // create modal content
    const modalContent = document.createElement("div");
    modalContent.classList.add("modalContent");
    const modalContentText = document.createElement("p");
    modalContentText.textContent = "...";
    // create X
    const span = document.createElement("span");
    span.classList.add("close");
    span.innerHTML = "amp;times;";

    btn.onclick = function () {
      modal.style.display = "block";
    };
    span.onclick = function () {
      modal.style.display = "none";
    };
    window.onclick = function (event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    };
  });
 document.body.appendChild(modal);
}
  

Чтобы облегчить вам жизнь, вы могли бы просто попытаться создать некоторый div узел, а затем установить внутреннее содержимое с innerHTML помощью . Т.е.

 const modal = document.createElement('div');
modal.classList.add('modal');
modal.id = 'modal';
modal.hidden = true;

modal.innerHTML = `
  <div class="modalContent">
    <span class="close">amp;times;</span>
    <h2></h2>
    <p></p>
  </div>
`;

modal.querySelector('.close').addEventListener('click', () => { modal.hidden = true; });
  

querySelector помогает находить элементы внутри родительского узла, что очень полезно в подобных случаях.

Также есть несколько слов об hidden атрибуте. Кроме того, вы можете взглянуть на относительно новый <dialog> элемент, который разработан специально для модальных целей.