zoukankan      html  css  js  c++  java
  • 自定义弹出层!

    当不能运用框架的弹出层时,自定义简单的弹出层!

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title></title>

    <head>
    <title>弹出层</title>
    <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
    <style>
    .black_overlay {
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    100%;
    height: 100%;
    background-color: #ccc;
    z-index: 1001;
    -moz-opacity: 0.5;
    opacity: .50;
    filter: alpha(opacity=80);
    }

    .white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    50%;
    height: 40%;
    border: 2px solid #ff6600;
    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: 20px;">
    <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
    </div>
    有时需要自己做弹出层!!!
    </div>
    </body>

    </html>

  • 相关阅读:
    破解网站防盗链的方法
    Mysql用户设置密码和权限
    学者批教育不公阻碍穷二代向上流动 致贫者愈贫
    未来IT行业将缩减到三类职业
    RHEL6参考文档(官方的PDF文件)
    分析:低成本应用先锋 Linux系统大盘点
    提高网站排名的5大因素
    七部门查处奥数班遇尴尬 学生齐喊“出去”
    Linux步入弱冠之年
    职位 工作
  • 原文地址:https://www.cnblogs.com/lihong-123/p/7339871.html
Copyright © 2011-2022 走看看