jQuery實(shí)現(xiàn)彈出層效果

更新時(shí)間：2019年12月10日 14:46:57 作者：dq_095

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)彈出層效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)彈出層的具體代碼，供大家參考，具體內(nèi)容如下

###jQuery實(shí)現(xiàn) 彈出層效果

點(diǎn)擊彈出層：彈出彈出層
點(diǎn)擊陰影：關(guān)閉彈出層
點(diǎn)擊“關(guān)閉”關(guān)閉彈出層

整體代碼如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery彈出層效果</title>
 <style>
  .black_overlay {
   display: none;
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index: 1001;
   -moz-opacity: 0.8;
   opacity: .80;
   filter: alpha(opacity=80);
  }

  .white_content {
   display: none;
   position: absolute;
   top: 10%;
   left: 10%;
   width: 80%;
   height: 80%;
   border: 16px solid lightblue;
   background-color: white;
   z-index: 1002;
   overflow: auto;
  }

  .white_content_small {
   display: none;
   position: absolute;
   top: 20%;
   left: 30%;
   width: 40%;
   height: 50%;
   border: 16px solid lightblue;
   background-color: white;
   z-index: 1002;
   overflow: auto;
  }
 </style>
 <script type="text/javascript">
  //彈出隱藏層
  function ShowDiv(show_div, bg_div) {
   document.getElementById(show_div).style.display = 'block';
   document.getElementById(bg_div).style.display = 'block';
   var bgdiv = document.getElementById(bg_div);
   bgdiv.style.width = document.body.scrollWidth;
   // bgdiv.style.height = $(document).height();
   $("#" + bg_div).height($(document).height());
  };
  //關(guān)閉彈出層
  function CloseDiv(show_div, bg_div) {
   document.getElementById(show_div).style.display = 'none';
   document.getElementById(bg_div).style.display = 'none';
  };
 </script>
</head>

<body>
 <input id="Button1" type="button" value="點(diǎn)擊彈出層" onclick="ShowDiv('MyDiv','fade')" />
 <!--彈出層時(shí)背景層DIV-->
 <div id="fade" class="black_overlay" onclick="CloseDiv('MyDiv','fade')">
 </div>
 <div id="MyDiv" class="white_content">
  <div style="text-align: right; cursor: default; height: 40px;">
   <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">關(guān)閉</span>
  </div>
  目前來(lái)說(shuō)，我還是喜歡這個(gè)自己改造的彈出層。自己在項(xiàng)目中也用的是這個(gè)。
 </div>
</body>

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

瀑布流布局并自動(dòng)加載實(shí)現(xiàn)代碼
Pinterest使用一種新的方式布局取得成功之后，們把他叫做瀑布流，國(guó)內(nèi)現(xiàn)有美麗說(shuō)，蘑菇街，花瓣等代表的網(wǎng)站接下來(lái)為你介紹一個(gè)juqery的插件masonry的使用，感興趣的你可以參考下哈
2013-03-03
基于jquery實(shí)現(xiàn)智能表單驗(yàn)證操作
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)智能表單驗(yàn)證操作的相關(guān)資料，利用jquery實(shí)現(xiàn)了對(duì)一個(gè)表單字段格式的即時(shí)檢查，感興趣的小伙伴們可以參考一下
2016-05-05
jQuery 表單驗(yàn)證擴(kuò)展(四)
周末寫(xiě)的 jQuery 表單驗(yàn)證擴(kuò)展(三) 這篇文章點(diǎn)擊率過(guò)低，不知道是文章太失水準(zhǔn)還是什么其他原因，這里寫(xiě)文章只是為了分享一下自己寫(xiě)代碼的心得，
2010-10-10
jQuery實(shí)現(xiàn)簡(jiǎn)單登錄條件判斷
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單登錄條件判斷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
js實(shí)現(xiàn)表格篩選功能
本文主要介紹了js實(shí)現(xiàn)表格篩選功能的代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
jQuery選擇器中的特殊符號(hào)處理方法
一般情況下，在jQuery選擇器中，我們很少會(huì)用到諸如“.”、“#”、“(”、“[”等特殊字符，但是在實(shí)際應(yīng)用中，偶爾也會(huì)遇到表達(dá)式中含有“#”和“.”等特殊字符,那么是如何處理這些個(gè)特殊字符的呢？下面小編給大家介紹下
2017-09-09
基于JQuery的多標(biāo)簽實(shí)現(xiàn)代碼
最近在學(xué)習(xí)JQuery，其實(shí)也不叫學(xué)習(xí)，很久以前就學(xué)過(guò)，只是有一段時(shí)間沒(méi)用，有些生疏了，于是就做幾個(gè)小例子來(lái)練習(xí)練習(xí)，為了方便以后查找就將這些小示例記錄下來(lái)
2012-09-09
jQuery Position方法使用和兼容性
position方法獲取匹配元素相對(duì)父元素的偏移。接下來(lái)通過(guò)本文給大家分享jQuery Position方法使用和兼容性的相關(guān)知識(shí)，感興趣的朋友一起看看吧
2017-08-08
jquery實(shí)現(xiàn)無(wú)刷新驗(yàn)證碼的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)無(wú)刷新驗(yàn)證碼的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-05-05
javascript截圖 jQuery插件imgAreaSelect使用詳解
這篇文章主要介紹了avascript截圖 jQuery插件imgAreaSelect使用詳解,需要的朋友可以參考下
2016-05-05