<html>
<head>
<title></title>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<!-- 把下面代码加到<head>与</head>之间-->
<style type="text/css">
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity = 80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
/**
border: 16px solid orange;
**/
background-color: white;
z-index: 1002;
overflow: auto;
}
</style>
</head>
<body>
<!--把下面代码加到<body> 与</body>之间-->
<input type="radio" onclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">
<div id="light" class="white_content">
<input type="button" value="关闭" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></a>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
这个效果很好的大家可以去试试很多地方用的到!
分享到:
相关推荐
将div固定在屏幕中间 将div固定在屏幕中间 将div固定在屏幕中间 将div固定在屏幕中间
在网页设计中,"div固定在屏幕顶部"是一种常见的布局技术,主要用于创建固定导航栏、滚动条或者其他需要始终保持在视口顶部的元素。这个技术主要利用CSS(Cascading Style Sheets)中的`position`属性来实现,使得...
网页div在屏幕正中间显示
标题“div最上层锁定页面”涉及到的是网页布局和前端开发中的一个常见需求,即让一个div元素始终显示在页面的最上层,即使其他内容滚动也不会影响到它。这通常用于创建弹出窗口、提示框或者固定导航栏等元素。这种...
div垂直居中屏幕的方法,兼容IE6 7 8 Firefox
在网页设计中,"div页面框架布局"是一个关键的概念,它涉及到如何有效地组织网页内容,以便在各种浏览器中实现良好的显示效果。EasyUI是一个基于jQuery的用户界面库,提供了丰富的组件和布局方案,使得开发者能够...
将上述代码应用在一个具体的DIV元素上,如`<div id="div">`,则该DIV就会固定在屏幕的中央。此外,`width`和`height`属性可以用来定义DIV的宽度和高度,而`background-color`属性可以设置背景颜色。例如,可以设置...
"让DIV固定在页面的某个位置而不随着滚动条随意滚动" 在前端开发中,我们常常需要让某个DIV元素固定在页面的某个位置,而不随着滚动条的滚动而移动。这可以通过使用CSS的position属性来实现,特别是使用fixed值。...
在网页设计中,"div遮蒙锁定效果"是一种常见的交互设计技术,用于提供更好的用户体验,例如在加载新内容、弹出对话框或者显示提示信息时,遮盖住背景页面,让用户注意力集中于特定区域。本篇文章将深入探讨如何使用...
一、jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里。 比如:加载a.html里面的<div id=“row”></div>这个div里面的所有内容加载到b.html的这个div里<div id=”content...
通过分析和实践这个“houtai_yinhang”压缩包中的案例,初学者可以系统地学习到如何运用CSS和div进行页面布局,同时也能提升对前端开发的理解和实践经验。不断地练习和尝试,将有助于你成为一名熟练的前端开发者。
如果希望div在不同屏幕尺寸下仍然保持悬浮状态,需要考虑响应式布局。可以使用媒体查询(`media queries`)来调整div的位置和大小,使其在不同分辨率和设备上都能正确显示。 6. **动画效果**: 为了让div的悬浮效果...
在网页设计中,jQuery是一个...通过以上知识,我们可以创建出一个功能丰富的、基于jQuery和jQuery UI的可拖拽div页面,提升用户在网页上的操作体验。在实际项目中,要不断学习和实践,根据需求灵活运用这些技术和方法。
例如,我们可以创建一个Div,设置其`position: fixed`属性来使其固定在屏幕的某个位置,不受页面滚动的影响。 下面是一个简单的步骤概述: 1. **创建Div**:在ASP.NET页面的HTML部分,创建一个Div元素,并赋予一个...
在创建遮罩层时,我们通常会为`<div>`设置一个大的固定宽度和高度,覆盖整个屏幕,并设置适当的背景颜色(通常是半透明黑色),使其看起来像一个覆盖在页面上的层。通过CSS的 `position` 属性(如 `fixed` 或 `...
通过以上方法,我们可以实现动态调整页面中某个`<div>`的高度,使其能够适应不同的屏幕尺寸和浏览器窗口大小。这对于构建响应式和用户友好的Web应用来说是非常有用的技巧。在实际项目中,还可以结合CSS Flexbox或...
自己写的div布局测试页面,希望与大家多多分享。谢谢
在网页设计中,"页面中弹出对话框div"是一个常见的需求,用于向用户展示临时信息、确认操作或收集输入。对话框通常不离开主页面,而是覆盖在内容上,提供一种交互方式。本篇文章将深入探讨如何使用HTML的div元素来...
“锁定页面”是指保持页面内容在用户滚动时保持相对固定的位置,这通常通过CSS的`position: fixed`属性来实现。当一个元素的定位设置为固定时,它会相对于浏览器窗口进行定位,即使页面滚动,该元素也会保持在屏幕的...
下面将详细介绍div和CSS在创建静态页面中的重要性、原理以及实际应用。 Div(Division)是HTML中一个非常重要的布局容器标签,它用于分组HTML元素,以实现更好的页面结构和布局控制。Div元素本身没有特定的含义,但...