使用JavaScript實現(xiàn)彈出層效果的簡單實例

更新時間：2016年05月31日 09:47:17 投稿：jingxian

下面小編就為大家?guī)硪黄褂肑avaScript實現(xiàn)彈出層效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

聲明

閱讀本文需要有一定的HTML、CSS和JavaScript基礎(chǔ)

設(shè)計

實現(xiàn)彈出層效果的思路非常簡單：將待顯示的內(nèi)容先隱藏，在觸發(fā)某種條件后（如點擊按鈕），將原本隱藏的內(nèi)容顯示出來。

實現(xiàn)

<!DOCTYPE html>
<html>
<head>
  <title>Window對象</title>
  <meta charset="utf-8">
</head>
<body>
<a >百度一下</a>
<button type="button" id="open">打開彈出層</button>
<div style="display: none;background: lightblue;border:1px solid green;" id="toast">     <!--   設(shè)置display屬性為none以隱藏內(nèi)容       -->
  <p>這里是彈出層內(nèi)容</p>
  <button type="button" id="close">關(guān)閉彈出層</button>
</div>
<script type="text/javascript">
  var toast = document.getElementById("toast");
  document.getElementById("open").onclick = function(e){      <!--  定義點擊事件顯示隱藏內(nèi)容     -->
    toast.style.display = "block";
    toast.style.position = "fixed";
    var winWidth = window.innerWidth;
    var winHeight = window.innerHeight;
    var targetWidth = toast.offsetWidth;
    var targetHeight = toast.offsetHeight;
    toast.style.top = (winHeight - targetHeight) / 2 + "px";
    toast.style.left = (winWidth - targetWidth) / 2 + "px";
  }
  document.getElementById("close").onclick = function(e){        <!--   將顯示的內(nèi)容再次隱藏     -->
    toast.style.display = "none";
  }
</script>
</body>
</html>

顯示效果如下：

但是我們可以注意到，在彈出隱藏內(nèi)容之后我們還是可以通過鏈接進入百度頁面。為了防止這種情況的發(fā)生，我們可以提供遮罩層將原先的頁面內(nèi)容全部遮住。代碼如下：

<!DOCTYPE html>
<html>
<head>
  <title>Window對象</title>
  <meta charset="utf-8">
</head>
<body>
<a >百度一下</a>
<button type="button" id="open">打開彈出層</button>
<div id="cover" style="display: none;position: fixed;width: 100%;height: 100%;top:0px;left:0px;background: gray;">    <!-- 通過遮罩層遮住背景 -->
  <div style="background: lightblue;border:1px solid green;" id="toast">     <!-- 設(shè)置display屬性為none以隱藏內(nèi)容       -->
  　　<p>這里是彈出層內(nèi)容</p>
  　 <button type="button" id="close">關(guān)閉彈出層</button>
　　</div>
</div>
<script type="text/javascript">
  var toast = document.getElementById("toast");
  var cover = document.getElementById("cover");
  document.getElementById("open").onclick = function(e){      <!--  定義點擊事件顯示隱藏內(nèi)容     -->
    cover.style.display = "block";
    toast.style.position = "fixed";
    var winWidth = window.innerWidth;
    var winHeight = window.innerHeight;
    var targetWidth = toast.offsetWidth;
    var targetHeight = toast.offsetHeight;
    toast.style.top = (winHeight - targetHeight) / 2 + "px";
    toast.style.left = (winWidth - targetWidth) / 2 + "px";
  }
  document.getElementById("close").onclick = function(e){        <!--   將顯示的內(nèi)容再次隱藏     -->
    cover.style.display = "none";
  }
</script>
</body>
</html>

這是再次測試下效果，如下圖：