快捷導(dǎo)航

使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果

更新時(shí)間：2013年08月23日 18:49:41 作者：

隱藏模態(tài)窗口技術(shù)是一種很好的解決方案，用于處理不是特有必要出現(xiàn)在網(wǎng)頁上的界面元素，下面與大家分享下如何利用jQuery插件leanModal建立一個(gè)常規(guī)模態(tài)窗口

隱藏模態(tài)窗口技術(shù)是一種很好的解決方案，用于處理不是特有必要出現(xiàn)在網(wǎng)頁上的界面元素。社交網(wǎng)絡(luò)可以使用模態(tài)窗口傳達(dá)私人訊息以及只針對會員才能看到的表單。在博客和雜志網(wǎng)站也適用于與主網(wǎng)站分開的作者登陸頁面，模態(tài)窗口比在JavaScript中創(chuàng)建新窗口更容易，因?yàn)槭褂肏TML標(biāo)記顯示，所有的東西能都呈現(xiàn)在同一個(gè)窗口中。

我將演示如何利用jQuery插件leanModal建立一個(gè)常規(guī)模態(tài)窗口。如果你有MIT general license，那么這個(gè)插件是完全開源和免費(fèi)的，我很喜歡這個(gè)插件，用起來相當(dāng)方便，還能自行添加CSS，達(dá)到自定義的效果。

在線演示——下載源代碼

開始

首先創(chuàng)建兩個(gè)命名為“index.html”和“style.css”的文件，在同一個(gè)目錄中，創(chuàng)建另一個(gè)文件夾命名為/js/，包含進(jìn)剛才兩個(gè)文件。第一個(gè)是微型jQuery庫，第二個(gè)是leanModal插件，命名為jquery.leanModal.min.js。

復(fù)制代碼代碼如下:

 
<!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> 

可喜的是我們不需要再包含任何默認(rèn)CSS樣式表了，因?yàn)閘eanModal插件只提供了非?；镜腏S功能，一切都被精簡下來，只剩光禿禿的模板。然而我們需要復(fù)制CSS板塊來實(shí)現(xiàn)黑暗覆蓋效果。下面是我從插件網(wǎng)站復(fù)制下來的用在默認(rèn)樣式表中的代碼。

復(fù)制代碼代碼如下:

 
#lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px; 
.......... 

結(jié)語

模態(tài)窗口效果可以用在更多的情況下，不僅僅是登錄表單。你需要考慮各種UI元素的網(wǎng)頁，并考慮哪些元素在自己的窗口中可能更有用。這涉及到特殊形式或更長的詳細(xì)內(nèi)容，可能不是每個(gè)人都喜歡。請大家看看我的在線示例演示，看看我們?nèi)绾文軌蚴褂脴?biāo)準(zhǔn)的HTML塊實(shí)現(xiàn)這個(gè)leanModal jQuery效果。任何人對于CSS有一些基本的了解就不難理解我的默認(rèn)樣式設(shè)計(jì)。此功能有這么多的用途，其中不乏想象力。但我真的希望這些示例教程代碼可能會給開發(fā)者提供標(biāo)準(zhǔn)模板，以節(jié)省時(shí)間。

您可能感興趣的文章: