Div + css (first)

最新推荐文章于 2025-05-03 09:07:35 发布

Includemain

最新推荐文章于 2025-05-03 09:07:35 发布

阅读量170

点赞数

分类专栏： Html 文章标签： CSS HTML

Html 专栏收录该内容

1 篇文章

订阅专栏

本文通过HTML和JavaScript实现了一个简单的弹窗效果。页面中包含一个显示按钮，点击后会在屏幕中央出现一个带有背景遮罩的弹窗，内含问候语及关闭按钮。该示例展示了基本的网页布局技巧和简单的用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Test </TITLE>
   <style type="text/css">
	<!--
		html,body {
			height:100%; margin: 0px; font-size: 12px;
			font-family: FixedSys;
		}
		.mydiv {
			background-color: lightblue; border: 1px solid blue;
			text-align: center;
			line-height: 20px;
			font-size: 12px;
			font-weight: bold;
			z-index: 999;
			width: 200px;
			height: 120px;
			left: 50%;
			top: 50%;
			margin-left: 150px!important;
			margin-top: -60px!important;
			margin-top: 0px;
			position: fixed!important;
			position: absolute;
		}
		.bg,.popIframe {
			background-color: #666; display: none;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			filter: apha(opacity=50);
			opacity: 0.5;
			z-index: 1;
			position:fixed!important;
			position: absolute;

		}
		.popIframe {
			filter: alpha(opacity=0);
			opacity:0;
		}
	-->
  </style>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	function showDiv() {
		document.getElementById('popDiv').style.display = 'block';
		document.getElementById('popIframe').style.display = 'block';
		document.getElementById('bg').style.display = 'block';
	}
	function closeDiv() {
		document.getElementById('popDiv').style.display = 'none';
		document.getElementById('popIframe').style.display = 'none';
		document.getElementById('bg').style.display = 'none';
	}
  //-->
  </SCRIPT>
 </HEAD>

 <BODY>
	<div class="mydiv" id='popDiv' style="display: none">
	Hello world!<br/>
	<a href="javascript:closeDiv();">Close Div</a></div>
	<div id="bg" class="bg" style="display: none;"></div>
	<a href="javascript:showDiv();">Show Div<//a>
	<iframe id="popIframe" class="popIframe" frameborder="0"></iframe>
 </BODY>
</HTML>