纯css实现全屏居中自适应对话框

来源:赵克立 分类: 前端设计 标签:全屏css发布时间:2019-03-18 21:24:20浏览:107
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
温馨提示:
技术类文章有它的时效性,请留意文章更新时间以及软件的版本
更新时间:
2019-03-18 21:28:09

网页中会经常用到对话框,用的最多的就是直接用layer等插件实现的功能,但有时只想要一个简单的对话框功能不想要太多的其它代码,如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>标题</title>
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
</head>
<body>
    <style type="text/css">
    .bg-shade {
        position: fixed;
        _position: absolute;
        z-index: 998;
        top: 0px;
        left: 0px;
        width: 100%;
        _width: expression(document.documentElement.scrollWidth);
        height: 100%;
        _height: expression(document.documentElement.scrollHeight);
        background: rgba(0, 0, 0, 0.8);
        filter: alpha(opacity=50)
    }
    .dialog-wrap {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px
    }
    .dialog-wrap .dislog-con {
        max-width: 90%;
        background: #fff;
        padding: 30px 20px 10px 20px;
        font-size: 14px;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .dialog-wrap .dislog-con .close {
        position: absolute;
        right: 5px;
        top: 0px;
        display: block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        cursor: pointer
    }
    #dialog-container img {
        max-width: 100%;
    }
    </style>
    <div id="my-dialog" style="">
        <div class="bg-shade"></div>
        <div class="dialog-wrap">
            <div id="dialog-con" class="dislog-con">
                <div class="close" onclick="this.parentNode.parentNode.parentNode.style.display='none';">关闭</div>
                <div id="dialog-container">一个内容一个内容一个内容一个内容一一个内容个内容</div>
            </div>
        </div>
    </div>
</body>
</html>



微信号:kelicom QQ群:215861553 紧急求助须知
点击更换验证码
Win32/PHP/JS/Android/Python