zoukankan      html  css  js  c++  java
  • js遮罩效果

      今天要实现一个 弹出框居中的问题,由于有滚动条,不知道怎么设置高度. 

     再次 感谢网友提供的源代码.  由于比较急,一时忘记出处,真的很抱歉.


    <style>
     .joinclub
            {
                width: 350px;
                height: 60px;
                padding-left: 20px;
                padding-top: 20px;
                border: 1px solid #a3bad9;
                border-radius: 5px;
                background: #fff;
                padding-top: 10px;
                position: absolute;
                z-index: 99999999;
                display: none;
                left: 50%; /*FF IE7*/
                top: 50%; /*FF IE7*/
                margin-left: -220px !important; /*FF IE7 该值为本身宽的一半 */
                margin-top: -140px !important; /*FF IE7 该值为本身高的一半*/
                margin-top: 0px;
                position: fixed !important; /*FF IE7*/
                position: absolute; /*IE6*/
                _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
     document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
            }
            .bg123
            {
                background-color: #ccc;
                width: 100%;
                height: 100%;
                z-index: 99999998;
                left: 0;
                top: 0; /*FF IE7*/
                filter: alpha(opacity=50); /*IE*/
                opacity: 0.5; /*FF*/
                position: fixed !important; /*FF IE7*/
                position: absolute; /*IE6*/
                _top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
     document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /*IE5 IE5.5*/
            }
    
    </style>

     下面这一段代码 要放在 </body>和</html>之间

    </body>
    <div class="joinclub" id="joinclub" style="display: none">
        我是遮罩中间的提示框
        <input type="button" value="关闭我" onclick="closeCustomer()" />
    </div>
    <div id="bg123" alt="我是遮罩的背景色" class="bg123" style="display: none;">
    </div>
    <script type="text/javascript">
        function closeCustomer() {
            document.getElementById("joinclub").style.display = 'none';
            document.getElementById("bg123").style.display = 'none';
        }
        function join_club() {
                $("#joinclub").html($("#div_hid").html());
                document.getElementById('joinclub').style.display = 'block';
                document.getElementById('bg123').style.display = 'block';
        }
    </script>
    </html>
    

      

    感谢

  • 相关阅读:
    8、Windows下卸载Pycharm
    7、如何安装下载的*.tar.gz?
    6、Windows下Anaconda2(Python2)和Anaconda3(Python3)的共存
    3、Python·Jupyter Notebook各种使用方法记录
    2、Jupyter Notebook 快速入门
    1、在指定目录下启动Jupyter Notebook
    python字符串函数
    5、Anaconda的升级与卸载、新库的安装等
    Android性能测试工具Emmagee介绍
    Fiddler抓包使用教程-安装配置
  • 原文地址:https://www.cnblogs.com/mjxxsc/p/4512000.html
Copyright © 2011-2022 走看看