使用jQuery插件創建常規模態窗口登陸效果

2019-11-20 22:22:12

字體：大中小

來源：轉載

供稿：網友

隱藏模態窗口技術是一種很好的解決方案，用于處理不是特有必要出現在網頁上的界面元素。社交網絡可以使用模態窗口傳達私人訊息以及只針對會員才能看到的表單。在博客和雜志網站也適用于與主網站分開的作者登陸頁面，模態窗口比在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" > 
<link rel="icon" > 
<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有一些基本的了解就不難理解我的默認樣式設計。此功能有這么多的用途，其中不乏想象力。但我真的希望這些示例教程代碼可能會給開發者提供標準模板，以節省時間。

上一篇：jQuery中RadioButtonList的功能及用法實例介紹

下一篇：Jquery綁定事件(bind和live的區別介紹)