原生javascript 實現div彈出層

時間 2019-11-12

標籤原生 javascript 實現 div 彈出欄目 JavaScript 简体版

原文原文鏈接

<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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。