CSS - 层叠(模态对话框)

z-index 属性

定义和用法

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

注释：元素可拥有负的 z-index 属性值。

注释：Z-index 仅能在定位元素上奏效（例如 position:fixed/absolute;）

说明

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

 

opacity 属性

设置 div 元素的不透明级别：

规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。

 

示例1：

三层样式层叠

    <style type="text/css">
        #div1{
            height:1000px;
            background-color: #dddddd;
        }
        .hide{
            display: none;
        }
        .mid{
            position: absolute;
            background-color: black;
            top:0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 88;
            opacity: 0.5;
        }
        .top{
            height: 300px;
            width:400px;
            background-color: white;
            position: absolute;
            left:50%;
            margin-left: -200px;
            top:50%;
            margin-top:-150px;
            z-index:99;
        }
    </style>

    <div id="div1">
        <input type="button" name="show" value="show time" onclick="show()"/>
        <div>
            你的app发送的网络请求是电量消耗的主要原因, 本文先教你如何使用IDE工具来分类分析应用中的网络请求!
        </div>

    </div>
    <div id="div2" class="mid hide"></div>
    <div id="div3" class="top hide">
        <input type="button" name="cancel" value="cancel" onclick="hide()">
    </div>

    <script>
        function show(){
            document.getElementById("div2").classList.remove("hide");
            document.getElementById("div3").classList.remove("hide");
        }
        function hide(){
            document.getElementById("div2").classList.add("hide");
            document.getElementById("div3").classList.add("hide");
        }
    </script>

 

效果图：