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

2024-05-06 15:51:03

字體：大中小

供稿：網(wǎng)友

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

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

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

在線演示——下載源代碼

開(kāi)始

首先創(chuàng)建兩個(gè)命名為“index.html”和“style.css”的文件，在同一個(gè)目錄中，創(chuàng)建另一個(gè)文件夾命名為/js/，包含進(jìn)剛才兩個(gè)文件。第一個(gè)是微型jQuery庫(kù)，第二個(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 >
<link >
<link 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>

</head>

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

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

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

結(jié)語(yǔ)

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

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

下一篇：jquery中加載圖片自適應(yīng)大小主要實(shí)現(xiàn)代碼