动态创建模态 - vanilla JS

Question

我想创建一个模式，这意味着当我点击一个特定的导航 link 时，它不会将我重定向到它的页面，它只会让模式出现，无论我在哪里那时我在网站上。

我正在使用 WordPress 创建一个页面，这意味着我无权访问 HTML 文件，这就是我希望动态创建一个的原因。我知道模态的结构应该是这样的：

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

然后抓取 JS 文件中的这些 HTML 元素和函数 opening/closing 模态等

但是，我似乎无法仅使用 JS 来完成它，因为我很难定义在 HTML 中通过将 span 放入 div 等很容易实现的层次结构。非常感谢任何帮助！

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 = "&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);
}

Answer 1

为了让您的生活更轻松，您可以尝试创建一些 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">&times;</span>
    <h2></h2>
    <p></p>
  </div>
`;

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

querySelector 有助于在父节点中查找元素，在这种情况下非常有用。

还有一些关于 hidden attribute. In addition, you may take a look at relatively new <dialog> element 的内容是为模态目的而设计的。

动态创建模态 - vanilla JS

Dynamically create a modal - vanilla JS

html

javascript

modal-dialog

dynamic