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

所謂模態框，就是在當前頁面彈出一個子窗口，如果該子窗口不關閉的話，不能操作父窗口功能。

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

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

TinyBox的功能特色：

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

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

彈出的模態框可調用HTML內容，也可通過ajax調用其它頁面

可用來調用顯示圖片

可控制在一定時間后模態框自動關閉

可控制打開模態框時是否啟用載入Loading標識

可控制模態框大小，也可選擇根據模態框內容自適應大小

可通過簡單的CSS控制模態框樣式

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

TinyBox的使用方法：

第一步當然是要先引入Tinybox腳本文件及樣式

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

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

其它說明：

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

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

下載示例源碼：javascript實現的輕量級模態框解決方案 [大小：38.32 KB - 下載次數：178]

轉載于:https://www.cnblogs.com/291099657/archive/2009/08/21/1551098.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。