弹窗公告
<div id='myModal' class='modal'>
	<div class='modal-content'>
		<span class='close' onclick='closeModal()'>&times;</span>
		<h2>重要公告</h2>
		<p>尊敬的用户,我们将于下周一进行系统维护,届时将暂停服务,请合理安排您的使用时间。</p>
	</div>
</div>

<script>
	var modal = document.getElementById('myModal');

	function openModal() {
		modal.style.display = 'block';
	}

	function closeModal() {
		modal.style.display = 'none';
	}

	window.onclick = function(event) {
		if (event.target == modal) {
			modal.style.display = 'none';
		}
	}
</script>

<style>
	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.4);
	}

	.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;
	}
</style>
弹窗公告代码:如何创建网页弹出提示框

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

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