• 自定义弹出层!


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

    <!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>

  • 相关阅读:
    Java引用类型转换
    SWFUpload多文件上传使用指南
    SpringMVC中与Spring相关的@注解
    三层——c#版
    初识三层
    vb.net 总结
    设计模式总结
    设计模式系列——装饰模式
    设计模式系列——策略模式
    设计模式系列——简单工厂模式
  • 原文地址:https://www.cnblogs.com/lihong-123/p/7339871.html
Copyright © 2020-2023  润新知