HTML 代码:
<div id="popup-container"> <div id="popup-header">Hello World</div> <div id="popup-content">This is a simple popup.</div> <button id="close-btn">Close</button> </div>
CSS 代码:
#popup-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; width: 300px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); } #popup-header { font-size: 24px; font-weight: bold; margin-bottom: 10px; } #popup-content { font-size: 16px; line-height: 1.5; margin-bottom: 20px; } #close-btn { display: block; margin: 0 auto; padding: 10px 20px; background-color: #333; color: #fff; border-radius: 5px; cursor: pointer; }
Javascript 代码:
var popupContainer = document.getElementById("popup-container"); var closeBtn = document.getElementById("close-btn"); function openPopup() { popupContainer.style.display = "block"; } function closePopup() { popupContainer.style.display = "none"; } closeBtn.addEventListener("click", closePopup); window.onload = function() { openPopup(); };
这个弹窗的样式和动作分别由 CSS 和 Javascript 控制。当页面加载完毕后,自动运行