jQuery UI Dialog元件實現簡單的彈出層（modal）
阿新 • • 發佈：2018-12-23
前言
在web專案中經常會用到彈出層/視窗，例如簡單的新增和修改功能，但如果專案的前端沒有引入任何框架，可能就要手動去建立DOM，然後通過js去控制，這樣雖然沒問題，但是樣式和效果等等不易控制，對於那種後端熟而前端卻不熟的工程師來說還是有一定難度。而如果僅僅為了用一個彈出層/視窗而引入一套臃腫的前端框架又顯得沒必要，比如EasyUI。我的選擇是jQuery UI的Dialog元件，沒有多餘的檔案，一個js檔案和一個css檔案，即可幫我們快速實現這種效果。
Dialog Widget
早期版本如果想實現modal window是通過jQuery modal來完成的，然而對現在jQuery UI的Dialog元件來說，僅僅只需配置一個屬性即可，它提供了豐富的屬性、方法和事件，幾個比較實用的是：modal（模態）、draggable（可拖拽）、resizable（可調整大小）等等，可以看到和Easy UI中的Dialog完全類似，包括屬性的設定和方法的呼叫都是大同小異。下面直接貼出demo的程式碼：
可以看到除了jquery之外，只引用了jquery-ui.js和jquery-ui的css樣式，這裡的css引用遠端地址是因為引用本地的話，dialog右上角的關閉圖示就不見了，也不知道什麼原因。下面看一下效果：<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Modal message</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/jquery-ui.js" ></script> <script> $(function() { $("#dialog-message").hide(); }); function showDialog() { $("#dialog-message").dialog({ height: 300, width: 200, // 模態開啟 modal: true, // 是否可拖拽 draggable: false, // 最小寬度 minWidth: 300, buttons: { "確認分配": function() { alert("確認分配！"); $(this).dialog("close"); } } }); } </script> </head> <body> <input type="button" value="Show Dialog" onclick="showDialog();" /> <div id="dialog-message" title="未分組學生名單"> <p>小王</p> <p>小李</p> <p>小張</p> <p>小明</p> <p>小強</p> </div> </body> </html>
在官方的api中也有詳細的使用說明：http://api.jqueryui.com/dialog/
最後再貼上jquery.js、jquery-ui.js和jquery-ui.css，版本是最新的1.11.4，支援jquery 1.6+，可放心下載使用，
注意：如果dialog右上角的關閉按鈕不顯示的話，可以考慮換成上面程式碼中的遠端地址。
總結
提供一種較為簡單的網頁彈出層/視窗的解決方案，The End。