1. 程式人生 > 其它 >3.3 jQuery UI dialog

3.3 jQuery UI dialog

匯入庫

<!-- 樣式 --> <link rel="stylesheet" href="../js/jquery-ui.min.css"> <!-- jQuery --> <script src="../js/jquery-1.11.3.min.js"></script> <!-- jquery UI --> <script src="../js/jquery-ui.min.js"></script> 開啟方式 <script> $(function() { $( "#dialog" ).dialog();
}); </script> <div id="dialog" title="基本的對話方塊"> <p>這是一個預設的對話方塊,用於顯示資訊。對話方塊視窗可以移動,調整尺寸,預設可通過 'x' 圖示關閉。</p> </div> 完整例子 假設#dialogShowArr是id="dialogShowArr"的div //初始化jsp中的一個視窗 dialogLost = $("#dialogShowArr").dialog({//初始化彈出框 autoOpen: false, height: 460, width: 850, modal:
true, buttons: { "確認1": function(){ save1(); }, "關閉": function() { $("#dialogShowArr").dialog("close"); } }, close: function() {//關閉按鈕執行表單清空 $('#addform')[0].reset(); } }); //開啟、關閉定義好的一個視窗 //$("#dialogShowArr").dialog("open"); dialogLost.dialog("open"); dialogLost.dialog("close");