vw，vh视区完全覆盖与纯CSS弹框
今天本人用了css的相对视窗单位vw和vh制作了一个效果，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vw，vh视区完全覆盖与纯CSS弹框</title>
<style type="text/css">
.dialog_container {
display: none;
width: 100%;
width: 100vw;
height: 100%;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog_container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}
.dialog_box {
display: inline-block;
border: 1px solid #ccc;
text-align: left;
vertical-align: middle;
position: relative;
}
.dialog_title {
line-height: 28px;
padding-left: 5px;
padding-right: 5px;
border-bottom: 1px solid #ccc;
background-color: #eee;
font-size: 12px;
text-align: left;
}
.dialog_close {
position: absolute;
top: 5px;
right: 5px;
}
.dialog_body {
background-color: #fff;
}
.demo_image {
-webkit-transition: width .3s;
-moz-transition: width .3s;
transition: width .3s;
}
</style>
</head>
<body>
<div class="demo">
<p style="width: 400px;position: relative;z-index: 11;background-color: #fff;">
图片宽度(目前
<span id="imageWidth">446</span>
像素):128
<input type="range" step="32" max="1024" min="128" value="512">
1024
</p>
<p>
<button id="testButton" type="button">点击我出现图片弹框</button>
</p>
</div>
<div id="dialogContainer" class="dialog_container">
<div id="dialogBox" class="dialog_box">
<div id="dialogTitle" class="dialog_title">尺寸动态可变图片</div>
<a href="javascript:;" id="dialogClose" class="dialog_close">[关闭]</a>
<div id="dialogBody" class="dialog_body">
<img src="cat.png" class="demo_image"/>
</div>
</div>
</div>
<script type="text/javascript">
(function(){
if(typeof window.screenX === "number"){
var $ = function(selector){
return document.querySelector(selector);
};
//元素们
var eleWidth = $("#imageWidth"), eleRange = $("input[type='range']"), eleBtn = $("#testButton"),
eleDialog = $("#dialogContainer");
eleBtn.addEventListener("click", function() {
$("#dialogBody img").style.width = eleRange.value + "px";
eleDialog.style.display = "inline";
});
eleRange.addEventListener("click", function() {
eleWidth.innerHTML = this.value;
$("#dialogBody img").style.width = this.value + "px";
});
$("#dialogClose").addEventListener("click", function() {
eleDialog.style.display = "none";
return false;
});
} else {
alert("您现在使用的浏览器内力不足，为防止走火入魔，建议使用IE9+或Chrome 20+浏览器~~");
}
})();
</script>
</body>
</html>其中
.dialog_container {
display: none;
width: 100%;
width: 100vw;
height: 100%;
height: 100vh;
background-color: rgba(0,0,0,.35);
text-align: center;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.dialog_container:after {
display: inline-block;
content: '';
width: 0;
height: 100%;
vertical-align: middle;
}这段css的作用是生成覆盖浏览器窗口的蒙版
typeof window.screenX === "number"在ie7和ie8下返回false
在ie9，chrome，firefox下返回true
所以可以用typeof window.screenX === “number”来判断浏览器的类型