lightbox效果,半透明遮盖层

  lightbox效果,半透明的遮盖层,遮盖文字内容效果,不允许操作

<style>
#mask{position:absolute;left:0px;top:0px;background:#000;opacity:.5;filter:alpha(opacity=50);display:none}
</style>
<div style="height:1000px">内容<input type="button" value="显示lightbox" onclick="showMask()" /></div>
<script>
    var strict = document.compatMode == 'CSS1Compat';
    function showMask() {
        var dv = document.getElementById('mask'), d = document[strict ? 'documentElement' : 'body'];
        dv.style.width = d.scrollWidth + 'px';
        dv.style.height = d.scrollHeight + 'px';
        dv.style.display = 'block';
    }
    window.onresize = function () {
        var dv = document.getElementById('mask'), d = document[strict ? 'documentElement' : 'body'];
        dv.style.width = d.clientHeight + 'px';
        dv.style.width = d.scrollWidth + 'px';
        dv.style.height = d.scrollHeight + 'px';
    }
</script>
<div id="mask"></div>

 



原创文章,转载请注明出处:lightbox效果,半透明遮盖层
评论(0)Web开发网
阅读(45)喜欢(0)不喜欢(0)JavaScript/Ajax