來源：GBin1.com
隱藏模態窗口技術是一種很好的解決方案，用於處理不是特有必要出現在網頁上的界面元素。社交網絡可以使用模態窗口傳達私人訊息以及只針對會員才能看 到的表單。在博客和雜志網站也適用於與主網站分開的作者登陸頁面，模態窗口比在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; height:100%; width:100%; background: #000; display: none; }
覆蓋區域將在頁面頂部以100%的高度和寬度出現，jQuery鎖定目標模態div，出現在HTML最前面。需要注意的是，我的body內容相當空，唯一重要的元素是用於顯示模態窗口的切換按鈕。我們來看看HTML表單#loginmodal div編碼段。
<div id="loginmodal" style="display:none;">
<h1>User Login</h1>
<form id="loginform" name="loginform" method="post" action="index.html">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2">
<div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
</form>
</div>
注意，我已經包括：none; 作為一個單一的內聯CSS屬性。我們需要強制這個div沒有顯示，然后leanModal()可以使其在頁面褪色，並顯示為一個板塊元素。我使用的是非常簡單的類似CSS checkout form， 淺藍色的設計匹配較暗的陰影覆蓋，加上輸入字段上，我們可以利用CSS3過渡效果。另一個重要的頁面元素是“提交”按鈕。因為這種形式將不發送任何數據到 服務器，當用戶提交的時候，我們只是想隱藏模態窗口。我添加了類.hidemodal，可以設置內部jQuery方法。它將停止默認表單提交這個模態窗 口，並顯示為一個純粹美觀的效果。
CSS布局風格
我的CSS文件包含了所有需要的典型頁面重置，以及一些排版和按鈕樣式。中心的登陸模態窗口包含一個新的按鈕樣式，模仿的是其他平面設計。但其實沒有太多獨特的CSS屬性需要進一步解釋，你應該能夠構建自己的模態窗口樣式。
/** page structure **/ #w { display: block; width: 750px; margin: 0 auto; padding-top: 30px; } #content { display: block; width: 100%; background: #fff; padding: 25px 20px; padding-bottom: 35px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; } /** custom login button **/ .flatbtn-blu { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; outline: 0; border: 0; color: #edf4f9; text-decoration: none; background-color: #4f94cf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); font-size: 1.3em; font-weight: bold; padding: 12px 26px 12px 26px; line-height: normal; text-align: center; vertical-align: middle; cursor: pointer; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,0.3); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .flatbtn-blu:hover { color: #fff; background-color: #519dde; } .flatbtn-blu:active { -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1); box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1); }
我認為需要掌握的關鍵要素是疊加效應和模態窗口的容器，我把這些移動到樣式表的底部了，與其他所有的模態窗口屬性分為一組。並限制了 模態窗口寬度為300px，因為這個示例只能有2個輸入。但是請記住，leanModal不會強迫任何默認樣式到你的窗口，所以你可以100%的自主設 計。
/** modal window styles **/ #lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none; } #loginmodal { width: 300px; padding: 15px 20px; background: #f3f6fa; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); } #loginform { /* no default styles */ } #loginform label { display: block; font-size: 1.1em; font-weight: bold; color: #7c8291; margin-bottom: 3px; } .txtfield { display: block; width: 100%; padding: 6px 5px; margin-bottom: 15px; font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif; color: #7988a3; font-size: 1.4em; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8); background-color: #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#edf3f9), to(#fff)); background-image: -webkit-linear-gradient(top, #edf3f9, #fff); background-image: -moz-linear-gradient(top, #edf3f9, #fff); background-image: -ms-linear-gradient(top, #edf3f9, #fff); background-image: -o-linear-gradient(top, #edf3f9, #fff); background-image: linear-gradient(top, #edf3f9, #fff); border: 1px solid; border-color: #abbce8 #c3cae0 #b9c8ef; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4); -webkit-transition: all 0.25s linear; -moz-transition: all 0.25s linear; transition: all 0.25s linear; } .txtfield:focus { outline: none; color: #525864; border-color: #84c0ee; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec; -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec; }
每個文本字段的邊框和框陰影都有過渡動畫效果，在兩個輸入之間文字的顏色也將消失。我選擇了淡藍色的配色方案和與輸入字段匹配的按鈕效果。還有許多其他提供前綴CSS3屬性，所以這種形式更適合於新的渲染引擎。但它只能在主流瀏覽器上正確的顯示與渲染。
jQuery模態效果
不 幸運的是我們無法通過點擊事件靠着CSS3來實現隱藏/顯示不同的窗口，而且毫無可能性。通過shadowbox效果，就更容易在JavaScript中 達到模態窗口效果。幸好leanModal插件只需要一行JS就能激活，我把以下代碼塊放在結束用的</body>標簽之前了。
$(function(){ $('#loginform').submit(function(e){ return false; });
第一小段代碼塊的作用是用戶按下“登陸”，就嘗試提交表單。我們使用JavaScript關鍵字返回false來停止事件。你可以在Stack Overflow上閱讀更多有關此方法的文章。最后一行是我們非常需要的模態窗口工作代碼。
$('#modaltrigger').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" }); });
如果我們不自定義任何參數，$(‘#modaltrigger’).leanModal()也能很好的運行。不過在演示中我展 示了3個可選變量你可以適用於函數中。首先設置窗口頂部的偏移值，然后背景透明度級別標記在0.0-1.0之間。最后附加一個新的jQuery選擇器來關 閉按鈕。這可以是一個類或ID，或某些組合，包括HTML屬性選擇器。在我的示例中，補充到登陸按鈕都使用的是相同的類.hidemodal，如此一來， 每次按下“提交”按鈕，模態窗口就會隱藏起來。
為了使表單實際生效，你需要從按鈕中刪除這個類，以及刪除leanModal()函數之前的JavaScript代碼塊。結果是將用戶重定向到一個新的頁面。你可以多多運用不同的方法，檢驗模態呈現的最好方式是哪一種。
結語
模 態窗口效果可以用在更多的情況下，不僅僅是登錄表單。你需要考慮各種UI元素的網頁，並考慮哪些元素在自己的窗口中可能更有用。這涉及到特殊形式或更長的 詳細內容，可能不是每個人都喜歡。請大家看看我的在線示例演示，看看我們如何能夠使用標准的HTML塊實現這個leanModal jQuery效果。任何人對於CSS有一些基本的了解就不難理解我的默認樣式設計。此功能有這么多的用途，其中不乏想象力。但我真的希望這些示例教程代碼 可能會給開發者提供標准模板，以節省時間。
via 極客標簽