Question

我尝试构建一个登录页面，当用户单击联系人时，将弹出一个带有表单的框。

我添加了一个模式脚本，该脚本效果很好，但仅适用于一个按钮。我为所有按钮添加了id或class，但它无法正常工作。

<button class="trigger">Click here to trigger the modal!</button>
<div class="modal">
    <div class="modal-content">
        <span class="close-button">×</span>
        <h1>Hello, I am a modal!</h1>
    </div>
</div>

var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");

function toggleModal() {
    modal.classList.toggle("show-modal");
}

function windowOnClick(event) {
    if (event.target === modal) {
        toggleModal();
    }
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

我希望能够将'.trigger'添加到任何按钮或a-tag并使其正常工作。

Answer 1

您可以这样做：

triggers=document.getElementsByClassName('trigger');
for (let i=0;i< triggers.length;i++){
    triggers[i].addEventListener("click", toggleModal);
}

此代码段将事件侦听器添加到所有“ .trigger”分类标签中。

如何使此代码适用于所有Button？

1 个答案: