<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML 纯css浮窗居中和打开or关闭</title>
<link rel="stylesheet" type="text/css" href="base.css" />
<style type="text/css">
.fixed{
position: fixed;
left: -100%;
right:100%;
top:0;
bottom: 0;
text-align: center;
font-size: 0;
_display:none;/*IE6隐藏，不显示*/
}
.fixed:after {
content:"";
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0;
}
.content{
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
text-align: left;
position: relative;
right: -100%;
font-size: 16px;
background-color: #ddd;
color: #06f;
width: 200px;
height: 150px;
}
.openbtn{ _display:none;}
</style>
</head>
<body>
<button onclick="document.getElementById('dialog').style.display = 'block'" class="openbtn">打开窗口</button>
<div class="fixed" id="dialog">
<div class="content">
<button style="position: absolute; right: 0; top: 0;" type="button" onclick="document.getElementById('dialog').style.display = 'none'">关闭窗口</button>
阅谁问群诵<br />水落清香浮
</div>
</div>
</body>
</html>
PS：IE6时，隐藏不显示。兼容IE8+，火狐，谷歌，欧朋，苹果。
效果图：
相关推荐
兼容ie系列ff+google的纯css网页底部固定漂浮居中效果免费下载
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
纯CSS3实现的百叶窗动画效果是一种极具视觉吸引力的技术，它通过利用CSS3的特性，如选择器、转换（transform）、过渡（transition）和动画（animation），将一个图像或背景分割成多个部分，模拟百叶窗缓缓打开的效果...
这个特效模拟了现实世界中的百叶窗打开或关闭的过程，通常用于网站加载动画、背景过渡或者用户交互反馈，为网页增加趣味性和视觉吸引力。 百叶窗效果的关键在于利用CSS的伪类、渐变（gradients）以及绝对定位...
本资源“纯CSS3抽屉打开关闭动画特效.zip”聚焦于利用CSS3实现一个交互式的抽屉式动画效果，它允许用户通过鼠标点击来开启和关闭“抽屉”，提升了用户体验和界面的动态感。 抽屉式设计在现代网页和应用中广泛使用，...
css三角形、居中、圣杯布局
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...
在CSS3中，实现块元素的居中是一个常见的布局需求，尤其当涉及到页面设计与响应式布局时。根据所提供的文件信息，我们可以详细探讨几种在不同场景下实现块元素居中的方法，以及理解其中的原理。 ### 1. 内联元素...
HTML 纯CSS下划线出现动画
在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
在CSS中，可以通过多种方式实现元素的居中显示，包括水平居中和垂直居中。这里主要介绍水平居中的方法，适用于大多数场景。 1. **水平居中**：通常指的是将一个元素（如`div`）在其父元素内左右居中。 2. **垂直...
【标题】"纯CSS3仿窗帘拉开关闭动画特效"是一个前端开发项目，它利用了CSS3的特性来实现一种模拟窗帘拉开和关闭的动态效果。这个特效为网站或应用程序提供了吸引用户的互动体验，使得页面加载或某些交互操作更加生动...
在本文中，我们将深入探讨如何使用纯CSS3实现百叶窗效果的图片切换，以及四种不同的切换类型。百叶窗效果是一种视觉上引人入胜的图像过渡效果，它通过模拟百叶窗逐片打开的过程，使图片切换更加动态和有趣。 首先，...
本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层，并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示，且随着浏览器窗口的滚动而滚动。 首先，需要创建 HTML 结构，包括遮罩层和弹出层两个部分。...
【标题】中的“纯css3实现的仿窗帘拉开关闭百叶窗动画特效源码”表明这是一个使用CSS3技术实现的动态效果，具体是窗帘拉开和关闭的模拟，以及百叶窗式的动画效果。这种效果通常用于网站的加载界面或者页面过渡，能够...
在CSS布局设计中，将元素水平居中对齐是一项常见的需求。无论是图片、宽度和高度固定的元素，还是自适应的动态元素，都有多种方法可以实现水平居中。以下是标题所提及的“css水平居中4种方式”的详细解析： 1. **...
CSS 网页布局 DIV 水平居中的各种方法 在现代浏览器中，实现 DIV 的水平居中是一件非常简单的事情。下面我们将详细介绍几种常见的方法。 方法一：使用 margin:auto 这种方法是最简单的，直接将 DIV 的 margin ...
总的来说，纯CSS3仿窗帘拉开关闭动画特效展示了CSS3的强大能力，通过巧妙地运用动画和过渡属性，可以创造出富有创意和互动性的网页元素，提升用户体验。如果你对前端开发感兴趣，这将是一个很好的学习和实践案例。