點擊彈出居中帶有透明遮罩層視窗

来源:http://www.cnblogs.com/studygood/archive/2016/02/11/5186573.html
-Advertisement-
Play Games

點擊彈出居中帶有透明遮罩層視窗:本章節介紹一下如何點擊一個按鈕實現彈出一個居中視窗,並且此視窗帶有半透明的遮罩層效果,此效果在當下比較流行,當然還有更為複雜的實現方式,當然效果也更為絢麗,下麵介紹的代碼能夠簡單實現此效果。代碼如下: <!DOCTYPE html> <html> <head> <me


點擊彈出居中帶有透明遮罩層視窗:
本章節介紹一下如何點擊一個按鈕實現彈出一個居中視窗,並且此視窗帶有半透明的遮罩層效果,此效果在當下比較流行,當然還有更為複雜的實現方式,當然效果也更為絢麗,下麵介紹的代碼能夠簡單實現此效果。
代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#fade {
  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);
}
#light{
  display:none;
  position:absolute;
  top:25%;
  left:25%;
  width:50%;
  height:50%;
  padding:16px;
  border:3px solid orange;
  background-color:white;
  z-index:1002;
  overflow:auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
   var linkbt=document.getElementById("linkbt");
   var light=document.getElementById('light');
   var fade=document.getElementById('fade');
   var closebt=document.getElementById("closebt");
   linkbt.onclick=function(){
     light.style.display='block';
     fade.style.display='block';
   }
   closebt.onclick=function(){
     light.style.display='none';
     fade.style.display='none';
   }
}
</script>
</head>
<body>
<a href="javascript:void(0)" id="linkbt"> 點擊這裡打開視窗</a>
<div id="light"><a href="javascript:void(0)" id="closebt">關閉視窗</a></div>
<div id="fade""></div>
</body>
</html>

以上代碼實現了我們的要求,下麵簡單介紹一下它的實現過程。
一.實現原理:
在預設狀態下,遮罩層和視窗都是隱藏不可見的,當點擊鏈接之後,能夠使視窗和遮罩層顯示,並且將遮罩層設置為半透明狀態。此兩個元素都採用絕對定位同時設置居中視窗的z-index屬性值大於遮罩層,這樣就可以使其覆蓋在遮罩層之上。當點擊關閉按鈕的時候,能夠將遮罩層和視窗隱藏,原理大致如此。
二.相關閱讀:
1.透明度設置可以參閱CSS如何設置div背景透明度且相容性良好一章節。
2.z-index可以參閱CSS的z-index屬性一章節。
3.onclick事件可以參閱javascript的onclick事件一章節。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12001

更多內容可以參閱:http://www.softwhy.com/javascript/


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 作為一名web開發人員,總結了一下經常用到的html標簽,如下:<html> <head> <!--meta頭標簽 表示頁面三秒後跳轉到新浪頁面--> <meta charset="utf-8" http-equiv="refresh" content="3;url=http://www.sina.
  • 最早在網頁中引入js拖放功能的是IE4,並且只可以拖放圖像和某些文本。IE5.5以後網頁中的任何元素都可以進行拖放。HTML5以IE為實例制定了拖放規範。FireFox3.5、Safari3+和Chrome也根據HTML5規範實現了原聲拖放功能。 拖動某元素時,將依次觸發下列事件: (1) drag
  • 1、使用表單標簽 網站使用 HTML 表單可與用戶進行交互,表單元素是允許用戶在表單中輸入內容,比如:文本框、文本域、單選框、覆選框、下拉列表、按鈕等等,表單可以把瀏覽者輸入的數據傳送到伺服器端,這樣伺服器端程式就可以處理表單傳過來的數據。表單使用表單標簽 <form> 來定義: <form met
  • css如何匹配第幾個li元素並設置樣式:如果有一個li元素列表,如果想設置指定位置li的樣式。這個在以前可能需要稍微麻煩一些,比如在這個要設置的li元素上添加一個class或者id之類。但是上面的方式不夠靈活,下麵介紹一下如何通過偽類選擇器實現此功能。代碼實例: <!DOCTYPE html> <h
  • jquery實現的選項卡的嵌套代碼實例:關於選項卡功能大家一定都不會陌生,無非就是滑鼠點擊或者懸浮能夠切換相關的內容。通常情況下,大家見到的選項卡都是沒有嵌套功能的,也就是說就是完成了一層切換效果,本章節分享一段代碼實例,實現了選項卡的嵌套功能,也就是選項卡中嵌套有選項卡功能,也就能夠容納更多的內容
  • 點擊刪除彈出提示是否刪除代碼:在一些應用中,會有刪除功能,比如刪除新聞等功能,在這些功能中,當點擊刪除的時候,一般會彈出提示視窗,提示是否要刪除指定的內容,以防止出現誤操作現象,下麵就通過代碼實例介紹一下,如何彈出這個提示視窗。代碼實例如下: <!DOCTYPE html> <html> <head
  • 使用box-shadow屬性實現圓角效果代碼實例:通常實現圓角效果我們使用border-radius,其實我們也可以使用box-shadow屬性來實現。兩個屬性的具體用法這裡就不多介紹了,具體可以參閱以下兩個文章:(1).圓角效果可以參閱CSS3實現圓角效果一章節。(2).box-shadow可以參
  • 利用jquery實現的批量設置指定type類型input標簽的樣式:input標簽具有多種類型,如果input標簽眾多的話,並且需要動態的設置它們的樣式,那麼使用jquery將是一個良好的選擇。代碼實例: $("input[type=text]").each(function(){ $(this).
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...