以下是一个基本的实现:

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() 函数来显示不同的消息。

javascript 实现一个一直显示的弹窗

原文地址: https://www.cveoy.top/t/topic/bpWC 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录