以下是一个使用JavaScript的示例代码,用于在点击按钮时检查按钮的类名,并根据类名决定是否打开模态窗口:
HTML代码:
CSS代码:
.modal {
display: none; /* 默认隐藏模态窗口 */
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
JavaScript代码:
// 获取所有按钮元素
var buttons = document.getElementsByTagName("button");
// 遍历按钮元素
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
// 检查按钮的类名是否包含'modal-button'
if (button.classList.contains("modal-button")) {
// 给模态按钮添加点击事件监听器
button.addEventListener("click", function() {
// 显示模态窗口
document.getElementById("modal").style.display = "block";
});
}
}
在上面的代码中,我们首先获取了所有的按钮元素,并遍历每个按钮。然后,我们使用classList.contains()
方法检查按钮的类名是否包含"modal-button"。如果是,我们为该按钮添加了一个点击事件监听器,并在监听器中显示模态窗口。
请注意,为了演示方便,上述代码中只为一个按钮添加了模态窗口的功能。如果您需要为多个按钮添加类似的功能,只需在HTML中的按钮元素上添加相应的类名即可。