屏幕正中间浮窗html,HTML 纯css浮窗居中和打开or关闭

HTML 纯css浮窗居中和打开or关闭

.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;}

打开窗口

关闭窗口

阅谁问群诵
水落清香浮

PS：IE6时，隐藏不显示。兼容IE8+，火狐，谷歌，欧朋，苹果。

效果图：

屏幕正中间浮窗html,HTML 纯css浮窗居中和打开or关闭相关推荐

通过纯css实现图片居中的多种实现方式
html结构: 1 <div class="demo" style="width: 800px;height: 600px; border:1px solid #d ...
纯css 图片自适应居中
html 结构 <div class="container"><div class="content"></div> < ...
01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
纯CSS无hacks的跨游览器多列布局(转)
转自:http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html 翻译自Matthew James Taylor的Equal H ...
3种纯CSS实现中间镂空的12色彩虹渐变圆环方法
转载自张旭鑫一.从SVG实现多彩圆环倒计时效果说起上周我做了个demo,使用SVG和stroke-dasharray和stroke-dashoffset特性实现了一个彩条圆环倒计时效果,大概长下面 ...
史上最详细纯CSS打造3D文本滚动
昨天看见了一篇文章关于用纯CSS实现文本滚动,在这里跟大家分享一下. 首先把效果图贴给大家根据效果图我们很容易发现肯定是要用到3D转换的,如果对这个还不是很了解的可以先看看下面的文章 http:// ...
谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

屏幕正中间浮窗html,HTML 纯css浮窗居中和打开or关闭

屏幕正中间浮窗html,HTML 纯css浮窗居中和打开or关闭相关推荐

最新文章

热门文章