UI组件之浮出层

这次的任务是浮出层，查了网上的一些内容后大概了解了一些，有的比较复杂，有的比较简单，在这里做一个总结与梳理（简单一点的~）,如果有不当或错误之处，希望大家多多指教：

首先，我们的最终效果是这样的：

 

以下都是一些关键代码，做了一些简化的

先把html结构放出来：

<div class="test">这是测试内容这是测试内容这是测试内容</div>  //少写了几个“测试内容”，太长了~
    <div id="mask"></div>
    <div id="horizen">
        <div id="horizenCon">
            <h1>浮出层标题</h1>
            <p>浮出层内容：点击下面的两个按钮以及浮出层外任何一处均可退出浮出层</p>
        </div>
        <div class="confirm">
            <button id="ensure">确定</button>
            <button id="cancle">取消</button>
        </div>
    </div>
    <button id="pop">弹出浮出层</button>

 

 

 

 

我认为的浮出层就是先用一个超大的半透明黑布将所有内容覆盖掉，像下面这样：

    

当然，受到图片大小的限制，这里的截图是网页的一部分，大家懂这个意思就行；

为了实现这一点，我们需要一个半透明的遮罩层，可以用absolute来覆盖整个页面，代码如下：

#mask {
            position: absolute;
            top:0;
            right: 0;
            bottom: 0;
            left:0;
            height: 1080px;
            background-color: rgba(0,0,0,0.7);
            z-index: 1000;
        }

 

• 这里通过设置absolute的4个值，可以让mask覆盖整个页面。 
• 这里因为遮罩层要覆盖整个页面，所以z-index的值设置的比较大。 
• 半透明是用背景色rgba做的，也可以用opasity
• 高度设置那么高是为了让滚动条显示出来

遮罩层做好了，接下来就是我们的浮出层，浮出层我做的比较简单了，就是固定定位一下盒子就可以了，这里直接上代码：

#horizen {
            position: fixed;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
            width: 400px;
            z-index: 1001;
            cursor:move;
        }

• translate(x,y)可以根据自身宽高进行移动，括号内数值为正的话分别是向右和向下移动。 -50%是向左和向上移动自身一半，就能有居中的效果
• cursor:move是为了等会移动浮出层用的，只是鼠标样式，加了更容易辨识，就像鼠标变成一个小手的形状你就知道这里有一个链接一样。
• 至于浮出层里面的样式就自己随意设置就行了

　 浮出层的样式就做好了，接下来只需要给按钮添加一个事件，它点击时可以让我们的样式显示或消失(其实就是改变display属性),以下是js代码：

var mask =document.getElementById('mask');
var horizen =document.getElementById('horizen');
var ensure =document.getElementById('ensure');
var cancle =document.getElementById('cancle');

    //改变浮出层的显示属性
    function horizen_display(dis){
            mask.style.display=dis;
            horizen.style.display=dis;
    }

    //点击弹出按钮，弹出浮出层
    function appear(){
        document.getElementById('pop').onclick=function(){
            horizen_display("block");
        }
    }

    //浮出层消失
    function disappear(){
        mask.onclick=function(){
            horizen_display("none");
        }
        ensure.onclick=function(){
            horizen_display("none");
        }
        cancle.onclick=function(){
            horizen_display("none");
        }
    }
　
　  appear();
　　disappear():

 

 

 

 

ok，浮出层就做好了。至于拖拽浮出层移动，下次再来总结。