javascript 实现一个一直显示的弹窗
以下是一个基本的实现:
HTML:
<div id="popup">
<span id="popup-message"></span>
<button id="popup-close">关闭</button>
</div>
CSS:
#popup {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f44336;
color: #fff;
padding: 10px;
display: none;
z-index: 9999;
}
#popup-message {
display: inline-block;
margin-right: 10px;
}
#popup-close {
background-color: #fff;
color: #f44336;
border: none;
padding: 5px 10px;
cursor: pointer;
float: right;
margin-top: 5px;
}
JavaScript:
// 获取元素
const popup = document.getElementById('popup');
const popupMessage = document.getElementById('popup-message');
const popupClose = document.getElementById('popup-close');
// 显示弹窗
function showPopup(message) {
popupMessage.textContent = message;
popup.style.display = 'block';
}
// 关闭弹窗
popupClose.addEventListener('click', function() {
popup.style.display = 'none';
});
// 测试弹窗
showPopup('这是一个测试弹窗!');
这个弹窗将在页面底部一直显示,直到用户点击“关闭”按钮。您可以使用 showPopup() 函数来显示不同的消息。
原文地址: https://www.cveoy.top/t/topic/bpWC 著作权归作者所有。请勿转载和采集!