在href为“#”的所有元素上显示通知框,可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<a href="#" class="notification-link">Click me</a>
<div id="notification" class="notification">
<span class="close-btn">×</span>
This is a notification message.
</div>
CSS:
.notification {
position: fixed;
top: 50px;
right: 50px;
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: 10px;
display: none;
}
.close-btn {
float: right;
cursor: pointer;
}
.notification-link {
text-decoration: none;
color: #333;
}
.notification-link:hover {
text-decoration: underline;
}
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var notificationLink = document.querySelector('.notification-link');
var notification = document.getElementById('notification');
var closeBtn = document.querySelector('.close-btn');
notificationLink.addEventListener('click', function(e) {
e.preventDefault();
notification.style.display = 'block';
});
closeBtn.addEventListener('click', function() {
notification.style.display = 'none';
});
setTimeout(function() {
notification.style.display = 'none';
}, 5000);
});
在上述示例中,点击具有class为"notification-link"的元素时,通知框会显示出来。点击通知框右上角的关闭按钮或者等待5秒后,通知框会隐藏起来。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云