zoukankan      html  css  js  c++  java
  • 极简的css浮动窗口

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>浮动窗口</title>
    
    <style>
    .black_overlay {
        display: none;
        position: absolute;
        top: 0%;
        left: 0%;
         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: 25%;
        left: 25%;
         50%;
        height: 50%;
        padding: 0;
        border: 1px solid orange;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    }
    </style>
    <script>
    function openWin(){
            document.getElementById('light').style.display='block';
            document.getElementById('fade').style.display='block'    
    }
    function closeWin(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none'
    
    }
    </script>
    </head>
    <body>
    <p><a href="javascript:void(0)" onclick="openWin()">点击这里打开窗口</a></p>
    <div id="light" class="white_content"> 
                这里是窗口内容 
                <a href="javascript:void(0)" onclick="closeWin()"> Close</a>
     </div>
    <div id="fade" class="black_overlay"></div>
    </body>
    </html>
  • 相关阅读:
    PHP数字补零的两种方法
    php 防跨站表单提交
    PHP字符串压缩
    原生JS实现表单序列化serialize()
    java并发实现原子操作
    Effective java -- 9 并发/序列化
    Effective java -- 8 异常
    Effective java -- 7 通用程序设计
    Effective java -- 6 方法
    Effective java -- 5 枚举和注解
  • 原文地址:https://www.cnblogs.com/yuri2016/p/7110256.html
Copyright © 2011-2022 走看看