zoukankan      html  css  js  c++  java
  • html弹出div

    <!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>
            <title>弹出层</title>
            <meta charset="utf-8">
            <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
            <style>
                .black_overlay {
                    display: none;
                    position: absolute;
                    top: 0%;
                    left: 0%;
                    width: 100%;
                    height: 100%;
                    background-color: black;
                    z-index: 1001;
                    -moz-opacity: 0.8;
                    opacity: .80;
                    filter: alpha(opacity=80);
                }
    
                .white_content {
                    display: none;
                    position: absolute;
                    top: 10%;
                    left: 10%;
                    width: 80%;
                    height: 80%;
                    border: 16px solid lightblue;
                    background-color: white;
                    z-index: 1002;
                    overflow: auto;
                }
    
                .white_content_small {
                    display: none;
                    position: absolute;
                    top: 20%;
                    left: 30%;
                    width: 40%;
                    height: 50%;
                    border: 16px solid lightblue;
                    background-color: white;
                    z-index: 1002;
                    overflow: auto;
                }
            </style>
            <script type="text/javascript">
                //弹出隐藏层
                function ShowDiv(show_div, bg_div) { 
                    document.getElementById(show_div).style.display = 'block'; 
                    document.getElementById(bg_div).style.display = 'block'; 
                    var bgdiv = document.getElementById(bg_div); 
                    bgdiv.style.width = document.body.scrollWidth;  // bgdiv.style.height = $(document).height();
    
                    $("#" + bg_div).height($(document).height());
                };
                //关闭弹出层
                function CloseDiv(show_div, bg_div) { 
                    document.getElementById(show_div).style.display = 'none'; 
                    document.getElementById(bg_div).style.display = 'none';
                };
            </script>
        </head>
    
        <body>
            <input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
            <!--弹出层时背景层DIV-->
            <div id="fade" class="black_overlay">
            </div>
    
            <div id="MyDiv" class="white_content">
    
                <div style="text-align: right; cursor: default; height: 40px;">
                    <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
                </div>
                目前来说,我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
            </div>
        </body>
    
    </html>

    懒人转载网友:https://blog.csdn.net/llayjun/article/details/79196465
  • 相关阅读:
    mysqld_safe — MySQL Server Startup Script
    运行python出错:-bash: ./test.py: /usr/bin/python^M: bad interpreter: No such file or directory
    php set_error_handler
    linux chattr命令与php的配置文件.user.ini
    php memcache扩展
    GoLang之strings、buffers、bytes、binary包
    Solidity 编程实例--Blind Auction 盲拍
    Solidity 编程实例--简单的公开拍卖
    Solidity 编程实例--投票
    建立自己的数字货币
  • 原文地址:https://www.cnblogs.com/taleche/p/10216355.html
Copyright © 2011-2022 走看看