`
icyheart
  • 浏览: 779454 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

div出现在屏幕正中央的同时，锁定页面

CSSHTML 
阅读更多 
<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>

 这个效果很好的大家可以去试试很多地方用的到！

分享到：
| SQL Server安装时提示程序挂起解决方法
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    将div固定在屏幕中间

    将div固定在屏幕中间 将div固定在屏幕中间 将div固定在屏幕中间 将div固定在屏幕中间

    div固定在屏幕顶部

    在网页设计中，"div固定在屏幕顶部"是一种常见的布局技术，主要用于创建固定导航栏、滚动条或者其他需要始终保持在视口顶部的元素。这个技术主要利用CSS（Cascading Style Sheets）中的`position`属性来实现，使得...

    网页div在屏幕正中间显示

    网页div在屏幕正中间显示

    div 最上层锁定页面

    标题“div最上层锁定页面”涉及到的是网页布局和前端开发中的一个常见需求，即让一个div元素始终显示在页面的最上层，即使其他内容滚动也不会影响到它。这通常用于创建弹出窗口、提示框或者固定导航栏等元素。这种...

    div垂直居中屏幕

    div垂直居中屏幕的方法，兼容IE6 7 8 Firefox

    div页面框架布局

    在网页设计中，"div页面框架布局"是一个关键的概念，它涉及到如何有效地组织网页内容，以便在各种浏览器中实现良好的显示效果。EasyUI是一个基于jQuery的用户界面库，提供了丰富的组件和布局方案，使得开发者能够...

    设置一个DIV块固定在屏幕中央的两种方法(推荐)

    将上述代码应用在一个具体的DIV元素上，如`&lt;div id="div"&gt;`，则该DIV就会固定在屏幕的中央。此外，`width`和`height`属性可以用来定义DIV的宽度和高度，而`background-color`属性可以设置背景颜色。例如，可以设置...

    div遮蒙锁定效果大全

    在网页设计中，"div遮蒙锁定效果"是一种常见的交互设计技术，用于提供更好的用户体验，例如在加载新内容、弹出对话框或者显示提示信息时，遮盖住背景页面，让用户注意力集中于特定区域。本篇文章将深入探讨如何使用...

    使用jQuery加载html页面到指定的div实现方法

    一、jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里。 比如：加载a.html里面的&lt;div id=“row”&gt;&lt;/div&gt;这个div里面的所有内容加载到b.html的这个div里&lt;div id=”content...

    登陆页面案例（css+div）

    通过分析和实践这个“houtai_yinhang”压缩包中的案例，初学者可以系统地学习到如何运用CSS和div进行页面布局，同时也能提升对前端开发的理解和实践经验。不断地练习和尝试，将有助于你成为一名熟练的前端开发者。

    div悬浮在canvas上

    如果希望div在不同屏幕尺寸下仍然保持悬浮状态，需要考虑响应式布局。可以使用媒体查询(`media queries`)来调整div的位置和大小，使其在不同分辨率和设备上都能正确显示。 6. **动画效果**： 为了让div的悬浮效果...

    jQuery可拖拽DIV页面

    在网页设计中，jQuery是一个...通过以上知识，我们可以创建出一个功能丰富的、基于jQuery和jQuery UI的可拖拽div页面，提升用户在网页上的操作体验。在实际项目中，要不断学习和实践，根据需求灵活运用这些技术和方法。

    asp.net（C#） 弹出Div锁定桌面

    例如，我们可以创建一个Div，设置其`position: fixed`属性来使其固定在屏幕的某个位置，不受页面滚动的影响。 下面是一个简单的步骤概述： 1. **创建Div**：在ASP.NET页面的HTML部分，创建一个Div元素，并赋予一个...

    计算Web页面的高度并给div赋高度

    通过以上方法，我们可以实现动态调整页面中某个`&lt;div&gt;`的高度，使其能够适应不同的屏幕尺寸和浏览器窗口大小。这对于构建响应式和用户友好的Web应用来说是非常有用的技巧。在实际项目中，还可以结合CSS Flexbox或...

    div布局测试页面

    自己写的div布局测试页面，希望与大家多多分享。谢谢

    页面中弹出对话框div

    在网页设计中，"页面中弹出对话框div"是一个常见的需求，用于向用户展示临时信息、确认操作或收集输入。对话框通常不离开主页面，而是覆盖在内容上，提供一种交互方式。本篇文章将深入探讨如何使用HTML的div元素来...

    仿Lightbox效果（Windows关机效果），div覆盖，锁定页面及IE 6实现position:fixed;

    “锁定页面”是指保持页面内容在用户滚动时保持相对固定的位置，这通常通过CSS的`position: fixed`属性来实现。当一个元素的定位设置为固定时，它会相对于浏览器窗口进行定位，即使页面滚动，该元素也会保持在屏幕的...

    经典div+css静态页面

    下面将详细介绍div和CSS在创建静态页面中的重要性、原理以及实际应用。 Div（Division）是HTML中一个非常重要的布局容器标签，它用于分组HTML元素，以实现更好的页面结构和布局控制。Div元素本身没有特定的含义，但...

    测试div显示数据时页面加载时间

    标题“测试div显示数据时页面加载时间”和描述“关于div与table在显示数据时页面但加载时间，通过比较时间可以看出哪个更快”提示我们关注的是两种常见的HTML元素——`div`和`table`在加载大量数据时的性能差异。...

Magicbox
Global site tag (gtag.js) - Google Analytics