欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2016年05月31日 09:47:17   投稿:jingxian  
下面小編就為大家?guī)?lái)一篇使用JavaScript實(shí)現(xiàn)彈出層效果的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

聲明

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

設(shè)計(jì)

實(shí)現(xiàn)彈出層效果的思路非常簡(jiǎn)單:將待顯示的內(nèi)容先隱藏,在觸發(fā)某種條件后(如點(diǎn)擊按鈕),將原本隱藏的內(nèi)容顯示出來(lái)。

實(shí)現(xiàn)

<!DOCTYPE html>
<html>
<head>
  <title>Window對(duì)象</title>
  <meta charset="utf-8">
</head>
<body>
<a >百度一下</a>
<button type="button" id="open">打開(kāi)彈出層</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){      <!--  定義點(diǎn)擊事件顯示隱藏內(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)容之后我們還是可以通過(guò)鏈接進(jìn)入百度頁(yè)面。為了防止這種情況的發(fā)生,我們可以提供遮罩層將原先的頁(yè)面內(nèi)容全部遮住。代碼如下:

<!DOCTYPE html>
<html>
<head>
  <title>Window對(duì)象</title>
  <meta charset="utf-8">
</head>
<body>
<a >百度一下</a>
<button type="button" id="open">打開(kāi)彈出層</button>
<div id="cover" style="display: none;position: fixed;width: 100%;height: 100%;top:0px;left:0px;background: gray;">    <!-- 通過(guò)遮罩層遮住背景 -->
  <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){      <!--  定義點(diǎn)擊事件顯示隱藏內(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>

這是再次測(cè)試下效果,如下圖:

總結(jié)

上述內(nèi)容只是簡(jiǎn)單實(shí)現(xiàn)了彈出層效果,但是通過(guò)添加更多的代碼也可以在此基礎(chǔ)上實(shí)現(xiàn)更復(fù)雜的功能。

以上這篇使用JavaScript實(shí)現(xiàn)彈出層效果的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論