zoukankan      html  css  js  c++  java
  • HTML弹窗设计二

    <!DOCTYPE html>
    <html>
    <head>
    <title>模态框弹出层.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style>
    *{margin:0;padding:0;}
    body{
    100%;
    height:10000000px;
    }
    #mask{
    display:none;
    background:rgba(0,0,0,0.3);
    100%;
    height:100%;
    position:fixed;//利用固定定位的好处:页面还可以上下翻动,但是始终处于灰色背景下
    }
    #login{
    display:none;
    background:white;
    400px;
    height:250px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-200px;
    margin-top:-125px;
    }
    #login #close_login{
    position:absolute;
    left:350px;
    top:10px;
    font-size:20px;
    20px;
    height:20px;
    background:skyblue;
    cursor:pointer;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var btn=document.getElementById("btn");
    var mask=document.getElementById("mask");
    var login=document.getElementById("login");
    btn.onclick=function(){
    mask.style.display="block";
    login.style.display="block";
    };
    var close_login=document.getElementById("close_login");
    close_login.onclick=function(){
    mask.style.display="none";
    login.style.display="none";
    };
    };
    </script>
    </head>

    <body>
    <div id="mask"></div>
    <div id="login">
    <span id="close_login">×</span>
    11111111111111111111
    </div>
    <a href="javascript:;" id="btn">请登录</a>
    </body>
    </html>

  • 相关阅读:
    带修改离线主席树 + 树状数组 ZOJ
    树上主席树 + LCA SPOJ
    基础静态主席树 POJ
    数列分块入门1-9 LibreOJ
    Some about me
    [Java]Thinking in Java 练习2.12
    [Java]Thinking in Java 练习2.10
    [Java]Java中的自动包装
    [Java]Thinking in Java 练习2.2
    [杂记]CodeBlocks下载、安装及设置
  • 原文地址:https://www.cnblogs.com/ince/p/10424481.html
Copyright © 2011-2022 走看看