JQuery Dialog自定義模態視窗控制元件

2019-12-13 00:58:57

有一位js大神吳劍曾經寫過一個JQuery Dialog(JS模態視窗,可拖拽的DIV)，這個東西在我做記事日曆時幫了我很大的忙，這是他寫的一個自定義彈窗的控制元件，使用者可以下載demo並且根據自己的需要更改，十分方便。現在最新版本是他2012-08-08更新的2.0.5版，我為了解決模態視窗問題也研究了很長時間他寫的程式碼，非常好，在這裡簡要分析一下它的程式碼，希望可以給這個控制元件的使用者帶來便利！雖然js模態視窗還是推薦用Modal,但是吳劍寫的這個功能也夠用，相比之下，就是介面差一點，但自定義性比較強。

1

首先介紹找到這款控制元件的方法，非常簡單。

百度一下：JQuery Dialog自定義模態視窗控制元件。

第一個就是。如圖

2

點選進入。吳劍的部落格。

先看控制元件展示，控制元件的效果，當然，彈窗內容是可以自定義的。

3

話不多說，下載demo，讓小編給大家分析一下程式碼。當然，小編的實力較弱，比不上吳劍大神，分析程式碼也只是介紹一下自定義時更改的地方，順便膜拜一下大神。

吳劍部落格上說明，介紹他的程式碼要說明出處，可是百度經驗上不允許放連結，所以我放一張版權截圖。此控制元件版權歸吳劍大神所有，小編只是介紹一下用法。

4

下載demo後，小編先介紹一下裡面的東西。

如圖1，這裡是demo的所有檔案。

5

接下來簡單介紹檔案的用途。

介紹如圖。

6

開啟default.html的原始碼。小編來簡要介紹一下。

其他都不用看，只管input的onclick事件就行了。

onclick事件是JqueryDialog.Open1（）和JqueryDialog.Open（）函數。

JqueryDialog.Open1（）開啟的視窗沒有底部。

而JqueryDialog.Open（）有。除此之外，兩者沒有區別。建議用JqueryDialog.Open1（），自己設定底部，因為原來的太醜。

什麼是底部，看截圖。

兩個函數的引數都是四個（1.彈窗title。2.彈出內容檔案路徑。3.寬度。4.高度）

重要的是2.詳細講講。

7

現在開啟js,也就是jquery_dialog.js。這裡包含了所有js程式碼。這是最重要的！！

一開始的一部分是一些初始引數，可以修改。建議自己改動。

8

再往下就是剛才的JqueryDialog.Open1（）和JqueryDialog.Open（）方法，當然只是個呼叫其他函數的中轉過程。實現的函數還在下邊，往下看。

9

看見這一堆了嗎？由於js排版問題，沒法看。小編教你個辦法。

百度一下：js格式化。將程式碼格式化一下，再貼上回來，這下好多了。好了，能看了。

10

最主要的東西都在init裡面。仔細研究這個。在init裡，用append（）和css（）設定了整個彈窗的頂端、底部，以及彈窗位置，可拖動等等東西。

這裡說明一些你可能需要改的地方：

1.關閉標示。就是彈窗右上角的「X」，個人覺得不好，不如換成圖片。更換方法截了張圖。以防你看不清，程式碼在第11步（只替換那一句）

src裡是圖片路徑，之所以加上滑鼠事件是可以形成動態圖片的效果。要不然太單調。記得把最上邊的cCloseText改成空字串。

11

_jd_dialog_m_h.append("<img src='檔案1路徑'?id='#jd_dialog_m_h_rr' style='float:right;'?onclick='JqueryDialog.Close();'??onmouseover=this.src='檔案2路徑'?onmouseout=this.src='檔案1路徑' />");滑鼠移動上去顯示檔案2，其他時間顯示檔案1