zoukankan      html  css  js  c++  java
  • CSS+js弹出居中的背景半透明div层

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>

    <style type="text/css">
    body{margin:0px}
    #big{100%; height:100%; position:absolute; top:0px; left:0px; right:0px; bottom:0px;background-color:#999;filter: Alpha(opacity=20); -moz-opacity:0.20; opacity:0.20; display:none; z-index:5}
    #small{ border:5px solid #CCC; 400px; padding:10px; position:absolute; top:35%; left:20%; display:none; background:#FFF; z-index:10}
    </style>
    <script type="text/javascript">
    function show()
    {   
         var divBig=document.getElementById("big");
       var divSmall=document.getElementById("small");
       var v_left=(document.body.clientWidth-divSmall.clientWidth)/2 + document.body.scrollLeft;
            var v_top=(document.body.clientHeight-divBig.clientHeight)/2 + document.body.scrollTop;
            divBig.style.top=document.body.scrollTop+'px';
       divSmall.style.left=(v_left-200)+'px';
            divSmall.style.top=(document.body.scrollTop+((document.body.clientHeight/2)-50))+'px';
       divBig.style.display="block";
       divSmall.style.display="block";
       document.body.style.overflow="hidden";
    }
    </script>
    </head>

    <body>
    <div id="big"></div>
    <div id="small">
    content
    </div>


    <button onClick="show()"> please Click me </button>


    </body>
    </html>

  • 相关阅读:
    帧同步资料收集
    随机数种子问题
    【转】 DOTA2中的伪随机及其lua实现
    C++ 异常机制分析
    细说new与malloc的10点区别
    static关键字总结
    C++11 并发编程基础(一):并发、并行与C++多线程
    论一个程序员的自我修养
    gSoap的多线程程序
    面试常见问题:
  • 原文地址:https://www.cnblogs.com/hx214blog/p/3091950.html
Copyright © 2011-2022 走看看