<!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>`元素是一...
纯CSS3实现的百叶窗动画效果是一种极具视觉吸引力的技术，它通过利用CSS3的特性，如选择器、转换（transform）、过渡（transition）和动画（animation），将一个图像或背景分割成多个部分，模拟百叶窗缓缓打开的效果...
标题中的“html+jq+css 自适应屏幕居中”指的是使用HTML、JavaScript（jQuery库）和CSS技术来实现网页元素在不同屏幕尺寸下都能保持居中的功能，特别是针对弹窗的场景。这样的设计有助于提供良好的用户体验，无论...
在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...
综上所述，"纯css3三星note3浮窗指令"涵盖了CSS3中的多项关键技术，包括媒体查询、定位、过渡和动画、响应式设计等，开发者需要综合运用这些技术，创造出既美观又实用的浮窗效果，同时考虑设备特性和用户体验。
在网页设计中，让元素在页面上垂直居中是一项常见的需求。CSS（Cascading Style Sheets）提供了多种方法来实现这一目标。以下是一些主要的CSS技术，...在实践中不断尝试和学习，可以让你更好地掌握CSS垂直居中的技巧。
本资源“纯CSS3抽屉打开关闭动画特效.zip”聚焦于利用CSS3实现一个交互式的抽屉式动画效果，它允许用户通过鼠标点击来开启和关闭“抽屉”，提升了用户体验和界面的动态感。 抽屉式设计在现代网页和应用中广泛使用，...
在网页设计中，CSS（Cascading Style Sheets）是用于控制网页元素样式和布局的关键技术。其中，如何实现图片在容器中的垂直居中是一个常见的需求，尤其在响应式设计和现代网页布局中更为重要。本篇文章将深入探讨...
这个项目将向初学者展示如何通过纯HTML和CSS实现这一特效，无需JavaScript的复杂交互，非常适合前端初学者进行实践。 首先，我们需要理解HTML结构。在"百叶窗.html"文件中，HTML元素通常是图片或背景图像的容器。...
在网页设计领域，`DIV+CSS`是一种常见的布局方式，它通过HTML的`<div>`元素结合CSS（层叠样式表）来实现页面结构和样式的分离，提高了代码的可维护性和网页的加载效率。本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV...
css三角形、居中、圣杯布局
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...
本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:absolute实现水平垂直居中 使用position:absolute可以将DIV元素水平垂直居中，方法是将DIV元素的left和top属性设置为50%，然后通过margin-...
在CSS3中，实现块元素的居中是一个常见的布局需求，尤其当涉及到页面设计与响应式布局时。根据所提供的文件信息，我们可以详细探讨几种在不同场景下实现块元素居中的方法，以及理解其中的原理。 ### 1. 内联元素...
HTML 纯CSS下划线出现动画
在CSS中，可以通过多种方式实现元素的居中显示，包括水平居中和垂直居中。这里主要介绍水平居中的方法，适用于大多数场景。 1. **水平居中**：通常指的是将一个元素（如`div`）在其父元素内左右居中。 2. **垂直...
高仿小米商城，纯HTML5和CSS3实现 高仿小米商城，纯HTML5和CSS3实现 高仿小米商城，纯HTML5和CSS3实现 高仿小米商城，纯HTML5和CSS3实现 高仿小米商城，纯HTML5和CSS3实现 高仿小米商城，纯HTML5和CSS3...