Javascript 动态创建一个modal-JS

我想创建一个模式，这意味着当我点击一个特定的导航链接，而不是将我重定向到它的页面，它只会使模式出现，无论我在网站上的那一刻

我正在用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>

---

为了让您的生活更轻松，您可以尝试创建一些

div

节点，然后使用

innerHTML

设置内部内容。即

const modal=document.createElement（'div'）；
modal.classList.add（'modal'）；
modal.id='modal'；
modal.hidden=true；
modal.innerHTML=`
&时代；

`;
modal.querySelector（'.close'）.addEventListener（'click'，（）=>{modal.hidden=true；}）；

querySelector

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

还有几句话是关于。此外，您还可以查看相对较新的、专门为模态目的而设计的

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 = "×";

    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);
}