<!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+，火狐，谷歌，欧朋，苹果。
效果图：
相关推荐
HTML和CSS是网页设计的基础，本话题主要关注如何在包括IE6在内的多个浏览器上实现纯CSS的浮窗效果。在互联网早期，IE6是广泛使用的浏览器之一，但因其对现代Web标准的支持有限，开发者需要特别处理以确保兼容性。...
兼容ie系列ff+google的纯css网页底部固定漂浮居中效果免费下载
在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`<div>`元素是一...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
这个特效模拟了现实世界中的百叶窗打开或关闭的过程，通常用于网站加载动画、背景过渡或者用户交互反馈，为网页增加趣味性和视觉吸引力。 百叶窗效果的关键在于利用CSS的伪类、渐变（gradients）以及绝对定位...
本资源“纯CSS3抽屉打开关闭动画特效.zip”聚焦于利用CSS3实现一个交互式的抽屉式动画效果，它允许用户通过鼠标点击来开启和关闭“抽屉”，提升了用户体验和界面的动态感。 抽屉式设计在现代网页和应用中广泛使用，...
css三角形、居中、圣杯布局
这个项目将向初学者展示如何通过纯HTML和CSS实现这一特效，无需JavaScript的复杂交互，非常适合前端初学者进行实践。 首先，我们需要理解HTML结构。在"百叶窗.html"文件中，HTML元素通常是图片或背景图像的容器。...
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...
在CSS3中，实现块元素的居中是一个常见的布局需求，尤其当涉及到页面设计与响应式布局时。根据所提供的文件信息，我们可以详细探讨几种在不同场景下实现块元素居中的方法，以及理解其中的原理。 ### 1. 内联元素...
HTML 纯CSS下划线出现动画
在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
在CSS中，可以通过多种方式实现元素的居中显示，包括水平居中和垂直居中。这里主要介绍水平居中的方法，适用于大多数场景。 1. **水平居中**：通常指的是将一个元素（如`div`）在其父元素内左右居中。 2. **垂直...
【标题】"纯CSS3仿窗帘拉开关闭动画特效"是一个前端开发项目，它利用了CSS3的特性来实现一种模拟窗帘拉开和关闭的动态效果。这个特效为网站或应用程序提供了吸引用户的互动体验，使得页面加载或某些交互操作更加生动...
在本文中，我们将深入探讨如何使用纯CSS3实现百叶窗效果的图片切换，以及四种不同的切换类型。百叶窗效果是一种视觉上引人入胜的图像过渡效果，它通过模拟百叶窗逐片打开的过程，使图片切换更加动态和有趣。 首先，...
本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层，并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示，且随着浏览器窗口的滚动而滚动。 首先，需要创建 HTML 结构，包括遮罩层和弹出层两个部分。...
【标题】中的“纯css3实现的仿窗帘拉开关闭百叶窗动画特效源码”表明这是一个使用CSS3技术实现的动态效果，具体是窗帘拉开和关闭的模拟，以及百叶窗式的动画效果。这种效果通常用于网站的加载界面或者页面过渡，能够...
总的来说，纯CSS3仿窗帘拉开关闭动画特效展示了CSS3的强大能力，通过巧妙地运用动画和过渡属性，可以创造出富有创意和互动性的网页元素，提升用户体验。如果你对前端开发感兴趣，这将是一个很好的学习和实践案例。