zoukankan      html  css  js  c++  java

  • 全屏屏蔽、自动居中的lightBox IT

    最近网上搜索了一个比较不错 <全屏屏蔽、自动居中的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>
  • 相关阅读:
    伪静态规则写法RewriteRule-htaccess详细语法使用
    事务的操作
    layer 模版使用
    追加下拉框的自动生成
    PHP自动生成前端的表单框架
    MySQL高效获取记录总数
    引用JS表单验证大全 以后方便查看用
    关于left join连接查询 两张表里有同名字段的问题
    详解clientHeight、offsetHeight、scrollHeight
    php防止SQL注入详解及防范
  • 原文地址：https://www.cnblogs.com/machaofast/p/1938401.html
Copyright © 2011-2022 走看看