JQuery Dialog基本使用

  1. JQuery官網:https://jqueryui.com/dialog/,CDN:https://code.jquery.com/
  2. 下載完整範例:dialog_sample
  3. Dialog是JQuery UI的其中一個項目,所以引用Jquery UI的CSS與JS即可使用。
  4. 引用CSS檔:<link rel=”stylesheet” type=”text/css” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css“>
  5. 引用JQuery檔:<script src=”https://code.jquery.com/jquery-3.6.0.min.js“></script>
  6. 引用JQuery UI檔:<script src=”https://code.jquery.com/ui/1.13.0/jquery-ui.js“></script>
  7. 建立div,指定id(範例:dialog_id),標題title,style先設定隱藏,例:<div id=”dialog_id” title=”對話框標題” style=”display:none;”>對話框內內容</div>。
  8. 宣告Dialog參數「config」變數,寬度width:’數字’,高度height:’數字/auto’,位置position:{ my: “center”, at: “center”, of: window },讓對話框顯示在視窗的水平置中、垂直置中位置。
  9. 呼叫Dialog,「$(“#dialog_id“).dialog(config);」。

發佈留言