欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-19 12:52:38
...
在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代码:



尺寸动态可变图片

[关闭]

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



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