html实现弹出框口代码

涛哥
Html代码

下面是一个基本的HTML弹出框代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>弹出框示例</title>
	<script>
		function openPopup() {
			// 获取弹出框元素
			var popup = document.getElementById("myPopup");
			// 显示弹出框
			popup.style.display = "block";
		}
		
		function closePopup() {
			// 获取弹出框元素
			var popup = document.getElementById("myPopup");
			// 隐藏弹出框
			popup.style.display = "none";
		}
	</script>
	<style>
		/* 弹出框样式 */
		.popup {
			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); /* 半透明黑色背景 */
		}
		
		/* 弹出框内容样式 */
		.popup-content {
			background-color: #fefefe; /* 弹出框背景色 */
			margin: 10% auto; /* 上下居中，左右居中 */
			padding: 20px;
			border: 1px solid #888;
			width: 80%; /* 宽度为80% */
			max-width: 600px; /* 最大宽度为600px */
			text-align: center;
			position: relative;
		}
		
		/* 弹出框关闭按钮样式 */
		.popup-close {
			color: #aaa;
			float: right;
			font-size: 28px;
			font-weight: bold;
			position: absolute;
			right: 10px;
			top: 0;
		}
	</style>
</head>
<body>

	<h2>弹出框示例</h2>

	<button onclick="openPopup()">打开弹出框</button>

	<!-- 弹出框 -->
	<div id="myPopup" class="popup">
		<div class="popup-content">
			<span class="popup-close" onclick="closePopup()">&times;</span>
			<p>这是一个弹出框示例</p>
		</div>
	</div>

</body>
</html>

这个示例包括一个按钮，当用户点击按钮时，弹出一个基本的弹出框，其中包含一个关闭按钮和一段文本。您可以根据需要更改弹出框的样式和内容。

猜你喜欢：

html5实现分享功能代码

html5实现拖放文字功能

 
  • 分享功能代码