Question

我想创建一个模式，这意味着当我单击特定的导航链接时，而不是将我重定向到其页面，它只会使模式出现，无论我在该站点上的什么位置片刻。

我正在使用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元素以及一个打开/关闭模式的函数等。

但是，我似乎无法仅使用JS来完成此任务，因为我很难定义可以通过将span放入div等轻松在HTML中实现的层次结构。任何帮助将不胜感激！

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，还有几句话。另外，您可能会看到相对较新的<dialog> element，它是专门为模式目的设计的。

动态创建模式-香草JS

1 个答案: