库房管理系统之遮罩锁屏

前言

    学习JavaScript视频的时候了解到了遮罩锁屏，发现B/S的世界真是好玩，好多小功能可以探索可以实践！

是什么

    大家可以想一想我们打开网页时，通常需要一些弹框和子界面，然而，有些功能需要我们只能操作这些弹框和子界面，弹框或子界面外都不可以操作，弹窗或子窗体外不可操作就是锁屏，遮罩是使弹窗或子界面高亮显示，让用户看上去好像就只有这一个弹框或子界面。例如：下图所示效果：

    

实现

1.在需要遮罩锁屏界面的HTML里写：

@*锁屏面*@
<div id="screen" style="position:absolute;top:0;left:0;background:#000;z-index:8999;filter:alpha(opacity=30);opacity:0.3;display:none;"></div>

2.在弹窗和子窗体弹出事件中写：

//打开隐藏的win（入库弹出窗体）窗口    
    function openWin() {
        $("#winIn").window("open");

        //锁屏
        for (var i = 0; i < $('#screen').length; i++) {
            $('#screen')[i].style.width = document.documentElement.clientWidth + 'px';
            $('#screen')[i].style.height = document.documentElement.clientHeight + 'px';
            $('#screen')[i].style.display = 'block';
        } //锁屏
    }

3.当浏览器改变时，遮罩锁屏动态化

window.onresize = function () {
    for (var i = 0; i < $('#screen').length; i++) {
        if ($('#screen')[i].style.display == 'block') {
            $('#screen')[i].style.width = document.documentElement.clientWidth + 'px';
            $('#screen')[i].style.height = document.documentElement.clientHeight + 'px';
            $('#screen')[i].style.display = 'block';
        }
    }
}

4.关闭弹框或子界面时，借出遮罩锁屏

$(document).ready(function () {
        $('#winIn').window({
            onClose: function () {
                //解除锁屏
                for (var i = 0; i < $('#screen').length; i++) {
                    $('#screen')[i].style.display = 'none';
                } //解除锁屏
            }
        });