標籤：
來源：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有一些基本的瞭解就不難理解我的預設樣式設計。此功能有這麼多的用途，其中不乏想象力。但我真的希望這些樣本教程代碼 可能會給開發人員提供標準模板，以節省時間。
使用jQuery建立模態視窗登陸效果
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
