jQuery實作開啟網頁自動彈出遮罩層或點選彈出遮罩層功能範例
這篇文章主要介紹了jQuery實現打開網頁自動彈出遮罩層或點擊彈出遮罩層功能,涉及jQuery事件響應及窗口元素屬性的相關操作技巧,對jquery感興趣的朋友可以參考下本篇文章
本文實例講述了jQuery實作開啟網頁自動彈出遮罩層或點擊彈出遮罩層功能。分享給大家供大家參考，具體如下：
彈出層：兩種方式
一是開啟網頁就自動彈出層
二是點選彈出
<!DOCTYPE html>
<html>
<head>
<title>www.php.cn - jQuery简便实现遮罩层</title>
<meta charset="utf-8">
<style>
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
}
#main {
height:1800px;
padding-top:90px;
text-align:center;
}
#fullbg {
background-color:gray;
left:0;
opacity:0.8;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=80);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
#dialog {
background-color:#fff;
border:5px solid rgba(0,0,0, 0.8);
height:400px;
left:50%;
margin:-200px 0 0 -200px;
padding:1px;
position:fixed !important; /* 浮动对话框 */
position:absolute;
top:50%;
width:400px;
z-index:5;
border-radius:5px;
display:none;
}
#dialog p {
margin:0 0 12px;
height:24px;
line-height:24px;
background:#CCCCCC;
}
#dialog p.close {
text-align:right;
padding-right:10px;
}
#dialog p.close a {
color:#fff;
text-decoration:none;
}
</style>
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
showBg();
});
</script>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height:bh,
width:bw,
display:"block"
});
$("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
</head>
<body>
<p id="main"><a href="javascript:showBg();" rel="external nofollow" >点击这里查看效果</a>
<p id="fullbg"></p>
<p id="dialog">
<p class="close"><a href="#" rel="external nofollow" onclick="closeBg();">关闭</a></p>
<p>正在加载，请稍后....</p>
</p>
</p>
</body>
</html>以上就是本篇文章的所有內容，以及原始碼。希望對大家學習有幫助！
相關推薦：
關於jQuery滾動外掛程式scrollable.js用法分析
以上是jQuery實作開啟網頁自動彈出遮罩層或點選彈出遮罩層功能範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Edge瀏覽器怎麼將網頁用捷徑傳送到桌面？
Mar 14, 2024 pm 05:22 PM
Edge瀏覽器怎麼將網頁用捷徑傳送到桌面？我們很多用戶為了方便直接打開訪問頁面，想要將經常使用的網頁以快捷方式的形式顯示在桌面，但是不知道應該如何操作，針對這個問題，本期小編就來和廣大用戶們分享解決方法，一起來看看今日軟體教學分享的內容。 Edge瀏覽器將網頁傳送到桌面捷徑方法： 1、開啟軟體，點選頁面中的「...」按鈕。 2、在下拉式選單選項中選擇「應用」中的「將此網站作為應用程式安裝」。 3、最後在彈出的視窗中將其
網頁圖片載入不出來怎麼辦？ 6種解決辦法
Mar 15, 2024 am 10:30 AM
有網友發現打開瀏覽器網頁，網頁上的圖片遲遲加載不出來，是怎麼回事？檢查過網路是正常的，那是哪裡出現了問題呢？下面小編就來跟大家介紹一下網頁圖片載入不出來的六種解決方法。網頁圖片載入不出來： 1、網速問題網頁顯示不出圖片有可能是因為電腦的網路速度比較慢，電腦中開啟的軟體比較多， 而我們造訪的圖片比較大，這就可能因為載入逾時，導致圖片顯示不出來， 可以將比較佔網速的軟體將關掉，可以去任務管理器查看一下。 2、造訪人數過多 網頁顯示不出圖片還有可能是因為我們造訪的網頁，在同時段造訪的
php怎麼在網頁打開
Mar 22, 2024 pm 03:20 PM
在網頁中執行 PHP 程式碼需要確保 Web 伺服器支援並已正確配置 PHP。可以透過三種方式開啟 PHP： * **伺服器環境：**將 PHP 檔案放置在伺服器根目錄並透過瀏覽器存取。 * **整合開發環境：**將 PHP 檔案放置在指定 Web 根目錄並透過瀏覽器存取。 * **遠端伺服器：**透過伺服器提供的 URL 位址存取託管在遠端伺服器上的 PHP 檔案。
Linux小技巧：取消vim貼上時的自動縮排
Mar 07, 2024 am 08:30 AM
前言vim是個強大的文字編輯的工具，在Linux端得到極大的使用熱度。最近在另外一台伺服器上使用vim時，遇到了一個奇怪的問題：當我將本地編寫好的腳本複製並貼上到伺服器中的空白檔案時，出現了自動縮排的情況。用個簡單的例子來說，就是我在本地寫的腳本如下：aaabbbcccddd當我將上述內容複製後，粘貼到伺服器中的空白文件後得到的卻是：aabbbcccddd很明顯，這是vim給我們自動進行了格式縮排。但是，這個自動有點不聰明。這裡記錄下解決方案。解決方案：設定.vimrc設定檔我們在家目錄下，新
jQuery中如何使用PUT請求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u
在Linux上自動裝載驅動器
Mar 20, 2024 am 11:30 AM
如果您使用Linux作業系統，並希望系統在啟動時自動載入驅動器，可以透過將裝置的唯一識別碼（UID）和掛載點路徑新增至fstab設定檔來實現。 fstab是位於/etc目錄中的檔案系統表文件，它包含了系統在啟動時需要掛載的檔案系統的資訊。透過編輯fstab文件，您可以確保在每次系統啟動時都能正確載入所需的驅動器，從而確保系統的穩定運作。自動安裝驅動器可方便地應用於多種情境。例如，我計劃將系統備份到外部儲存設備。為了實現自動化，需確保設備與系統保持連接，甚至在啟動時。同樣，很多應用程式會直接
jQuery小技巧：快速修改頁面所有a標籤的文本
Feb 28, 2024 pm 09:06 PM
標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：<
Discuz編輯器：強大的網頁編輯工具
Mar 09, 2024 pm 06:06 PM
Discuz編輯器：強大的網頁編輯工具，需要具體程式碼範例隨著網路的發展，網站建立和內容編輯變得越來越重要。作為常見的網頁編輯工具，Discuz編輯器在網站建置中扮演著重要的角色。它不僅提供了豐富的功能和工具，還能夠幫助使用者更方便地編輯和發佈內容。在本文中，我們將介紹Discuz編輯器的特點和使用方法，並提供一些具體的程式碼範例，來幫助讀者更好地了解和使用
