1. 技术文章
  2. 全屏屏蔽、自动居中的lightBox

全屏屏蔽、自动居中的lightBox

由 夙愿已清 提交于 2020-04-08 04:47:38

最近网上搜索了一个比较不错 <全屏屏蔽、自动居中的lightBox>

代码如下：

 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>全屏屏蔽、自动居中的lightBox</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
        html, body
        {
            height: 100%;
            overflow: hidden;
            font: 12px/1.5 simsun;
        }
        .myPage
        {
            overflow: auto;
            width: 100%;
            height: 100%;
        }
        .lightBox, .popupCover, .popupIframe, .popupComponent
        {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .popupComponent
        {
            z-index: 2;
            display: none;
        }
        .popupIframe
        {
            display: none;
            _display: block;
            _filter: alpha(opacity=0);
        }
        .popupCover
        {
            background: #000;
            opacity: 0.7; *filter:alpha(opacity=70);}
        .lightBox
        {
            text-align: center;
            overflow: auto;
        }
        .lightBoxContent
        {
            display: inline-block; *display:inline;zoom:1;width:300px;padding:10px;background:#fff;border:5pxsolid#00b4ff;vertical-align:middle;}
        .lightBoxMaxHeight
        {
            display: inline-block;
            vertical-align: middle;
            height: 100%; *height:99.5%;width:1px;overflow:hidden;margin-left:-1px;}
        .lightBoxWrapper
        {
            display: inline-block; *display:inline;zoom:1;text-align:left;}
        .lightBoxClose
        {
            color: #f00;
        }
        .lightBoxSubmit
        {
            margin-top: 10px;
            padding-top: 5px;
            border-top: 1px solid #ccc;
        }
        .lightBoxSubmit input
        {
            font-size: 12px;
            padding: 0 10px;
            overflow: visible;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div class="myPage">
     
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        <div style="text-align: center;">
            <input type="button" value="位于第一屏的按钮" onclick="showLayer('lightBox')" />
        </div>
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        <select>
            <option>一个用于测试IE6中是否能覆盖住的select</option>
        </select>
        <br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        <select>
            <option>又一个用于测试IE6中是否能覆盖住的select</option>
        </select>
        <br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        <div style="text-align: center;">
            <input type="button" value="位于第二屏中的按钮" onclick="showLayer('lightBox')" />
            <input type="button" value="当内容已经超过了一屏的高度" onclick="showLayer('lightBox2')" />
        </div>
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
        假装很丰富的内容<br />
    </div>
    <div class="popupComponent" id="lightBox2">
        <iframe class="popupIframe"></iframe>
        <div class="popupCover">
        </div>
        <div class="lightBox">
            <div class="lightBoxContent">
                <div class="lightBoxWrapper">
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                    当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度 当内容已经超过了一屏的高度<br />
                </div>
                <div class="lightBoxSubmit">
                    <input type="button" value="确定" onclick="hideLayer('lightBox2')" />
                    <input type="button" value="取消" onclick="hideLayer('lightBox2')" />
                </div>
            </div>
            <span class="lightBoxMaxHeight"></span>
        </div>
    </div>
    <div class="popupComponent" id="lightBox">
        <iframe class="popupIframe"></iframe>
        <div class="popupCover">
        </div>
        <div class="lightBox">
            <span class="lightBoxMaxHeight"></span>
            <div class="lightBoxContent">
                <div class="lightBoxWrapper">
                    当提示小于一行时文字居中<br />
                </div>
                <div class="lightBoxSubmit">
                    <input type="button" value="确定" onclick="hideLayer('lightBox')" />
                    <input type="button" value="取消" onclick="hideLayer('lightBox')" />
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
    <!--
        function showLayer(id) {
            document.getElementById(id).style.display = "block";
        }
        function hideLayer(id) {
            document.getElementById(id).style.display = "none";
        }  
// --></script>

    <!--存在的两个细节性问题：  
1. 大家可以看到完整demo中并未出现font-size:0;，而在垂直居中法中却出现了。  
因为font-size:0在完整demo中，将使firefox3.5中读者完整阅读时lightBox的鼠标滚轮失效，原因不详，这一点大家可以作情处理。  
2. maxHeight这东西只能放在lightBoxContent的后面，因为在opera9.6中会出现bug-->
</body>
</html>

 

标签
css垂直居中
lightbox
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!