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

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

WBOY
Release: 2016-06-21 09:05:34
Original
1423 people have browsed it

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template