首頁 > 開發者 > JavaScript
隱藏模態視窗技術是一種很好的解決方案，用於處理不是特有必要出現在網頁上的介面元素。社交網路可以使用模態視窗傳達私人訊息以及只針對會員才能看 到的表單。在部落格和雜誌網站也適用於與主網站分開的作者登陸頁面，模態視窗比在JavaScript中建立新視窗更容易，因為使用HTML標記顯示，所有 的東西能都呈現在同一個視窗中。
我將示範如何利用jQuery外掛程式leanModal建立一個常規模態視窗。如果你有MIT general license，那麼這個外掛程式是完全開源和免費的，我很喜歡這個外掛程式，用起來相當方便，還能自行添加CSS，達到自訂的效果。
線上示範——下載原始碼
開始
首先建立兩個命名為“index.html”和“style.css”的檔案，在同一個目錄中，建立另一個檔案夾命名為/js/，包含進剛才兩個檔案。第一個是微型jQuery庫，第二個是leanModal外掛程式，命名為jquery.leanModal.min.js。
複製代碼 代碼如下:
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Modal Login Window Demo</title>
<link rel="shortcut icon" href="http://designshack.net/favicon.ico">
<link rel="icon" href="http://designshack.net/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.leanModal.min.js"></script>
<!-- jQuery plugin leanModal under MIT License http://leanmodal.finelysliced.com.au/ -->
</head>
可喜的是我們不需要再包含任何預設CSS樣式表了，因為leanModal外掛程式只提供了非常基本的JS功能，一切都被精簡下來，只剩光禿禿的模板。然而我們需要複製CSS板塊來實現黑暗覆蓋效果。下面是我從外掛程式網站複製下來的用在預設樣式表中的代碼。
複製代碼 代碼如下:
#lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px;
..........
結語
模 態視窗效果可以用在更多的情況下，不僅僅是登入表單。你需要考慮各種UI元素的網頁，並考慮哪些元素在自己的視窗中可能更有用。這涉及到特殊形式或更長的 詳細內容，可能不是每個人都喜歡。請大家看看我的線上樣本示範，看看我們如何能夠使用標準的HTML塊實現這個leanModal jQuery效果。任何人對於CSS有一些基本的瞭解就不難理解我的預設樣式設計。此功能有這麼多的用途，其中不乏想象力。但我真的希望這些樣本教程代碼 可能會給開發人員提供標準模板，以節省時間。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
