JQuery Dialog是一個基于JQuery的對話框插件,可以輕松地創建彈出框、模態框和警告框。
// 引入jquery和jquery-ui庫 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <link rel="stylesheet" > <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> // 創建基本的dialog $( "#dialog" ).dialog(); // 創建模態框 $( "#modal" ).dialog({ modal: true }); // 創建警告框 $( "#alert" ).dialog({ buttons: { "確定": function() { $(this).dialog("close"); } } });
這三個示例展示了如何使用JQuery Dialog創建不同類型的對話框。其中,基本的dialog是一個簡單的對話框,模態框是一個可以阻止用戶對頁面進行操作的對話框,警告框則包含了一個確定按鈕。
JQuery Dialog還提供了許多其他的選項和方法,可以定制化對話框的外觀和功能。例如,可以設置對話框的標題、大小、位置和按鈕,并且可以監聽對話框的事件,例如打開、關閉和改變大小。
// 設置對話框的標題和大小 $( "#dialog" ).dialog({ title: "我的對話框", width: 400, height: 300 }); // 設置對話框的位置 $( "#dialog" ).dialog({ position: { my: "center", at: "center", of: window } }); // 監聽對話框的關閉事件 $( "#dialog" ).on( "dialogclose", function( event, ui ) { alert( "對話框已關閉" ); });
總之,JQuery Dialog是一個非常方便、易用且功能強大的對話框插件,可以讓開發者輕松地創建各種類型的對話框,并且還提供了很多選項和方法來定制化對話框的外觀和功能。
上一篇mysql8的驅動的修改
下一篇使用css規則為a 偽類