前言:在写页面的时候,经常会用到弹出框效果,一般使用插件进行处理,但是有时会出现冲突问题,下文将记录用CSS实现弹出框效果,超级简单,在此记录一下。
一、div宽高固定,使用css实现居中效果
①当div的宽高固定时,父元素shadow通过absolute定位以后,通过top:50%,left:50%移动到屏幕中央,子元素shadow-bg也absolute定位,通过top,left自身宽高的负1/2距离,使shadow-bg的中心点移动到屏幕正中央。
②最外层shadow-box为遮罩效果,这样弹框居中时,也不会产生滚动效果。
补充:rgba(R,G,B,A)和opacity属性,都能实现元素的透明度。区别在于:opacity属性具有继承性,会让元素的所有子元素也具有透明度,但rgba()只作用于元素本身。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线预约平台--预约提示</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
.shadow-box {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.3);
}
.shadow {
position: absolute;
top: 50%;
left: 50%;
}
.shadow-bg {
width: 618px;
height: 400px;
position: absolute;
top: -309px;
left: -200px;
background: url(images/pic.png) no-repeat center;
}
</style>
</head>
<body>
<div class="shadow-box">
<div class="shadow">
<div class="shadow-bg">
</div>
</div>
</div>
</body>
</html>
在游览器显示效果如下所示:
这种方法简单便捷,而且兼容性好,可以兼容Firefox、Google、Edge和IE(IE可以向下兼容到8以下),使用范围较为广泛。
PS:进阶版本
再此基础上,可以再简化代码结构和css效果,具体情况如下:
①最外层的div:shadow-box设为遮罩,通过fixed固定位置,left:0,right:0铺满屏幕;
②弹框shadow-bg,通过absolute定位,left:50%,right:50%,使div左上角移动到屏幕中央,为了使其div内容主体移动到中间,使用margin-left和margin-right使其向上、向左移动自身宽高的1/2的距离,达到效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线预约平台--预约提示</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
.shadow-box {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(0,0,0,0.3);
}
.shadow-bg {
width: 618px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -309px;
margin-right: -200px;
background: url(images/pic.png) no-repeat center;
}
</style>
</head>
<body>
<div class="shadow-box">
<div class="shadow-bg">
</div>
</div>
</body>
</html>
二、div宽高固定,使用css(transform函数)实现居中效果
①父元素shadow通过fixed固定位置,并添加遮罩效果;②子元素shadow-bg通过absolute定位,通过top:50%和left:50%,使shadow-bg的左上角移至屏幕中央,再通过transform:translate(-50%,50%),使其主体内容移至中间位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹框</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
.shadow {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.3);
z-index: 999;
}
.shadow-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
width: 618px;
height: 400px;
background: url(images/pic.png);
}
</style>
</head>
<body>
<div class="shadow">
<div class="shadow-bg"></div>
</div>
</body>
</html>
兼容性:因为transform函数为css3中的新特性,所以支持IE9+的游览器,如果不需要向下兼容的话,可以考虑此方法。
三、用jQuery实现div水平和垂直居中
此方法可以不必知道div的宽高大小,也能实现水平垂直居中,适用于弹框内容为动态的情况。
①通过jQuery来设置div的css,获取div块级元素的左、上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去div的宽度,得到的值再除以2即左偏移量,右偏移量算法相同;②注意div的css设置要在resize()方法中完成,这样每次改变窗口大小时,都要执行设置div元素的css。
jQuery代码:
$(window).resize(function() {
$(".myblock").css({
position: "absolute",
left: ($(window).width() - $(".myblock").outerWidth())/2,
top: ($(window).height() - $(".myblock").outerHeight())/2,
});
});
此外在页面载入时,就需要调用resize()方法
$(function() {
$(window).resize();
});
这种方法,可以不需要知道div元素的具体宽度和高度大小,直接用jQuery就可以实现水平垂直居中,而且兼容各游览器,这种方法在很多弹出层效果中应用。
(tips:在页面的外面建一个Table,设置高度为100%,然后设置td垂直居中显示,把页面套进去就可以了。)
参考博客:css超简单实现div页面居中【适合做弹出框】https://www.cnblogs.com/sxs161028/p/7359651.html
让div等块级元素水平以及垂直居中的解决方法 让div等块级元素水平以及垂直居中的解决办法 - 阿豪聊干货 - 博客园
版权声明:本文为博主原创文章,未经博主允许不得转载 。