實現(xiàn)模態(tài)框的解決方案在互聯(lián)網(wǎng)上能找到不少，但是它們大多需要引入諸如Jquery、Mootools、Dojo、YUI等javascript庫。如果僅僅是要實現(xiàn)模態(tài)框就引入龐大的類庫，豈不是得不償失。這里為大家提供一款用javascript實現(xiàn)的輕量級模態(tài)框解決方案TinyBox。

所謂模態(tài)框，就是在當(dāng)前頁面彈出一個子窗口，如果該子窗口不關(guān)閉的話，不能操作父窗口功能。

去看一下本解決方案的在線示例：瀏覽在線示例

作者主頁（Author Website）：http://www.leigeber.com

TinyBox的功能特色：

TinyBox是一款獨立的的模態(tài)框腳本，使用時不需引入其他腳本庫。

TinyBox是一款輕量級模態(tài)框腳本，它的壓縮版本僅有3.5k

彈出的模態(tài)框可調(diào)用HTML內(nèi)容，也可通過ajax調(diào)用其它頁面

可用來調(diào)用顯示圖片

可控制在一定時間后模態(tài)框自動關(guān)閉

可控制打開模態(tài)框時是否啟用載入Loading標(biāo)識

可控制模態(tài)框大小，也可選擇根據(jù)模態(tài)框內(nèi)容自適應(yīng)大小

可通過簡單的CSS控制模態(tài)框樣式

該腳本在瀏覽器Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome下測試通過

TinyBox的使用方法：

第一步當(dāng)然是要先引入Tinybox腳本文件及樣式

通過下面語句調(diào)用模態(tài)框：
TINY.box.show('advanced.html',1,300,150,1,3)

TINY.box.show參數(shù)解釋：
第一個參數(shù)advanced.html，是要調(diào)用內(nèi)容。如果是ajax調(diào)用頁面，則寫該頁面的相對路徑；如果是調(diào)用HTML內(nèi)容，則傳入javascript對象；
第二個參數(shù)1，用來標(biāo)識是否通過ajax調(diào)用頁面，是為1，否為0；
第三個參數(shù)300，用來控制彈出模態(tài)框窗口寬度，使用0則為auto自適應(yīng)；
第四個參數(shù)150，用來控制彈出模態(tài)框窗口高度，使用0則為auto自適應(yīng)；
第五個參數(shù)1，用來控制是否顯示載入Loading標(biāo)識，1啟用，0不啟用；
第六個參數(shù)3，標(biāo)識3秒后模態(tài)框窗口自動關(guān)閉，該參數(shù)為可選，不寫該參數(shù)則為不自動關(guān)閉

其它說明：

本解決方案來源：來源，有什么問題可在來源主頁聯(lián)系作者，當(dāng)然也可在本頁面留言，大家一起討論。

作者說下個版本會引入新功能，一起期待。

下載示例源碼：javascript實現(xiàn)的輕量級模態(tài)框解決方案 [大小：38.32 KB - 下載次數(shù)：178]

轉(zhuǎn)載于:https://www.cnblogs.com/291099657/archive/2009/08/21/1551098.html

總結(jié)

以上是生活随笔為你收集整理的通过javascript实现的轻量级模态框解决方案（支持Ajax）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。