• 全屏屏蔽、自动居中的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>
  • 相关阅读:
    设计模式学习--Singleton
    Add Binary
    简洁的ios小界面
    第一节、介绍
    魅族MX5和努比亚布拉格手机參数对照
    python 深浅拷贝 进阶
    为什么要重写equals()方法与hashCode()方法
    在Myeclipse buildpath 加server lib
    push本地代码到github出错
    mysql事务,select for update,及数据的一致性处理
  • 原文地址:https://www.cnblogs.com/machaofast/p/1938401.html
Copyright © 2020-2023  润新知