您现在的位置是:网站首页> 编程资料编程资料
弹窗居中的简单实现方法淡入淡出效果的居中弹窗代码
2021-09-05
880人已围观
简介 下面小编就为大家带来一篇弹窗居中的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
最近做页面的时候经常会遇到弹出框居中的问题,
请教了一下身边的大牛,终于弄出来了,
实现的原理:
1,给外围盒子定义一个伪类:before
2,外围盒子定义fixed属性
3,定义内容盒子。
定义外围盒子:
CSS Code复制内容到剪贴板
- outbox{
- position:fixed;
- top:0;
- rightright:0;
- bottombottom:0;
- left:0;
- display:block;
- text-align:center;
- }
定义外围盒子伪类:
CSS Code复制内容到剪贴板
- outbox:before{
- content="";
- width:0;
- height:100%;
- display:inline-block;
- vertical-align:middle;
- }
定义内容盒子:
CSS Code复制内容到剪贴板
- contentbox{
- display:inline-block;
- vertical-align:middle;
- text-align:center;
- }
全部代码:
XML/HTML Code复制内容到剪贴板
- >
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <title>弹窗居中title>
- <style type="text/css">
- .outbox:before{
- content:"";
- width:0;
- height:100%;
- display:inline-block;
- vertical-align:middle;
- }
- .outbox{
- position:fixed;
- top:0;
- right:0;
- bottom:0;
- left:0;
- text-align:center;
- }
- .content{
- width:200px;
- height:200px;
- background-color:#ccc;
- display:inline-block;
- vertical-align:middle;
- }
- style>
- head>
- <body>
- <div class="outbox">
- <div class="content">
- div>
- div>
- <body>
- html>
以上这篇弹窗居中的简单实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
原文地址:http://www.cnblogs.com/White-Quality/p/4530867.html
相关内容
- 深入理解css中的align-content属性jquery结合CSS实现的多样式多视频列表连播效果源码css中常用的几种居中方法(推荐)深入理解CSS中的盒子模型CSS3实用方法总结(推荐)CSS中的各种选择器与样式优先级小结CSS左侧固定宽 右侧自适应的实现代码(兼容所有浏览器)
- CSS中的各种选择器与样式优先级小结css选择器设置标签样式的实例代码CSS3 :not()选择器实现最后一行li去除某种css样式详解CSS中的选择器优先级及样式层叠问题解决CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式html中css三种常见的样式选择器CSS 样式的使用方式、选择器
- 总结CSS中字符编码声明使用中的一些注意点深入理解CSS中的盒子模型CSS移动优先的12列响应式网格系统特效源码CSS3实用方法总结(推荐)CSS中的各种选择器与样式优先级小结使用CSS3的rem属性制作响应式页面布局的要点解析CSS中的字体大小设置属性总结CSS3弹性盒模型flex box快速入门心得(必看篇)轻松掌握CSS3中的字体大小单位rem的使用方法深入理解css中的align-content属性
- CSS中的选择器种类总结及效率比较CSS 设置技巧(单位和值与样式设置技巧)CSS3制作精致的照片墙特效CSS3轻松实现清新 Loading 效果的简单实例CSS 高级技巧总结(必看)浅谈CSS样式之背景、文本
- 纯CSS实现鼠标悬停显示图片效果的实例分享CSS中的选择器种类总结及效率比较浅谈css清除浮动(clearfix和clear)的用法彻底掌握CSS中的percentage百分比值使用CSS z-index 层级关系优先级的概念CSS中的line-height行高属性学习教程CSS 高级技巧总结(必看)
- 浅谈css清除浮动(clearfix和clear)的用法CSS清除浮动方法大全(小结)CSS3 清除浮动的方法示例CSS清除浮动float的三种方法小结清除css浮动的三种方法小结详解css清除浮动float的七种常用方法总结和兼容性处理浅谈css中浮动和清除浮动带来的影响CSS清除浮动方法小结浅谈CSS中的clear清除浮动CSS清除浮动的方法详解CSS清除浮动的常用方法优缺点分析
- 彻底掌握CSS中的percentage百分比值使用
- CSS z-index 层级关系优先级的概念css之Display、Visibility、Opacity、rgba和z-index: -1的区别解决CSS中子元素z-index与父元素兄弟节点的层级问题css 层叠与z-index的示例代码CSS3关于z-index不生效问题的解决z-index为负值的元素无法点击到的解决方法css z-index层重叠顺序使用介绍css中z-index: 0和z-index: auto的区别
- 使用CSS3中的calc()属性来以算式表达尺寸数值CSS3 calc()会计算属性详解详解CSS 3 中的 calc() 方法浅谈css3中calc在less编译时被计算的解决办法CSS3 Calc实现滚动条出现页面不跳动问题 CSS3的calc()做响应模式布局的实现方法浅析CSS中calc()的使用初探CSS3中的calc()功能巧用CSS3的calc()宽度计算做响应模式布局的方法
- 浅析css3中matrix函数的使用CSS3实现漂亮的照片墙效果的简单实例(推荐)CSS3解决移动页面上点击链接触发色块的问题 CSS3 animation实现逐帧动画效果利用CSS3的线性渐变linear-gradient制作边框的示例关于老式浏览器兼容HTML5和CSS3的问题