原生javascript 实现div弹出层

<html>
    <head>
        <title>show popup div</title>
        <style>
        .custom_overlay{
            display: none;
            position: absolute;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=88);
        }
        .custom_content {
            display: none;
            position: absolute;
            width: 100px;
            height: 50px;
            padding: 5px;
            background-color: rgb(186, 221, 226);
            z-index:1002;
        }
    </style>
 <script type="text/javascript">
  function showSystemSwitcherAtGivenPosition() {
   document.getElementById('custom-light').style.left = event.clientX;
   document.getElementById('custom-light').style.top = event.clientY;
   document.getElementById('custom-light').style.display='block';
   document.getElementById('custom-fade').style.display='block';
  }
  
  function closeSystemSwitcherPopupDiv() {
   document.getElementById('custom-light').style.display='none';
   document.getElementById('custom-fade').style.display='none';
  }
 </script>
    </head>
    <body>
        <p>sample to show popup div<br/>
  <a href = "javascript:void(0)" onclick = "showSystemSwitcherAtGivenPosition(this)">please click here!</a></p>
        <div id="custom-light" class="custom_content">
   <a href="http://www.sina.com.cn" >system 1#</a>
   <br />
   <a href="http://www.baidu.com" >system 2#</a>
   <br/>
   <br />
   <a style="position:relative; float:right" href = "javascript:void(0)" onclick = "closeSystemSwitcherPopupDiv()">close</a>
  </div>
        <div id="custom-fade" class="custom_overlay"></div>
    </body>
</html>

你可能感兴趣的:(JavaScript,弹出div)