CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面_html/css_WEB-ITnose

在css中vw和vh分别代表所占的百分比，可以设置最外部的容器的宽高，但是都要结合百分比一起使用。

展示

回到相关文章 »

图片宽度（目前1024像素）： 128 1024

点击我出现图片弹框

代码
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;
}
HTML代码：

尺寸动态可变图片

[关闭]

JS代码：
(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+浏览器~~");
}
})();