要使用 JQuery UI 的 Dialog Widget,首先必須引用 JQuery、JQueryUI。
1 | <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> |
接著在畫面上放入一個 div element。
1 | <div id="dialog"> |
在 Javascript 中用 JQuery 找到該 div element,並叫用 dialog 方法即可將該 div element 設為 Dialog。
1 | $(function() { |

若要做些細部設定,Dialog 有提供些 options 可供我們使用,像是 resizable 可以讓 dialog 進行手動縮放、buttons 可設定 dialog 的按鈕。
1 | $(function() { |

若要主動觸發 Dialog,也提供了些 methods 讓我們使用,像是 open。
1 | $("#open").click(function() |

最後這邊附上測試用的範例:
1 |
|