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>

  • 相关阅读:
    Linux 学习 -- 修改文件的权限(chmod)
    Spring MVC
    Spring AOP与IOC
    Java学习
    SSH学习
    Android之Service
    Android之操作相册
    Android之ListView优化
    Android之Bitmap 高效加载
    Android数据储存之SQLiteDatabase SQLiteOpenHelper类的简单使用
  • 原文地址:https://www.cnblogs.com/hx214blog/p/3091950.html
Copyright © 2011-2022 走看看