jQuery UI之dialog中各屬性的詳解
阿新 • • 發佈：2019-01-24
<!-- 基礎類庫 --> <SCRIPT type="text/javascript" src="js/jquery-1.4.4.min.js"></SCRIPT> <!-- 佈局的基本類庫(不涉及到佈局不需要)--> <SCRIPT type="text/javascript" src="js/jquery.layout.js"></SCRIPT> <!-- ui的樣式表 --> <link type="text/css" href="css/redmond/jquery-ui-1.8.9.custom.css" rel="stylesheet" /> <!-- ui的類庫 --> <script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script> <SCRIPT type="text/javascript"> $(document).ready(function () { //制定某個div的id 將其作為 Dialog $('#helpdialog').dialog({ //是否建立就開啟對話方塊，也就是是否頁面一開啟就顯示對話方塊 autoOpen: false, /*是否需要解決無法覆蓋IE6 select 元素無法被覆蓋的bug 就是在IE6下 div無法覆蓋<select></select> 是否使用那該屬性解決 */ bgiframe:true, //設定對話方塊寬度 width: 600, //設定對話方塊高度 height: 260, /* 設定對話方塊底部的按鈕 */ buttons: { "確定": function() { //單擊按鈕後的回撥函式，就是按鈕被單擊後的響應事件 $(this).dialog("close"); } /* "取消": function() { $(this).dialog("close"); } */ }, /* 是否為對話方塊新增ESC快捷鍵 */ //closeOnEscape: false, //對話方塊是否可以被拖動 draggable:false, //開啟對話方塊時是否使用特效 show:"slide", //關閉對話方塊時是否使用特效動畫 hide: "slide", //是否可以調整對話方塊的大小 resizable:false, //調整對話方塊的高度和寬度極限值(當resizable:true時) //maxHeight:520 //maxWidth:620 //minHeight:320 //minWidth:220 //是否為模態視窗，設定為 true 時，頁面上其它元素將被覆蓋且無法響應使用者操作。也就是無法再主介面上進行其他操作 modal:true, //是否可覆蓋其它對話方塊 //stack:false //對話方塊標題(也可以再div的title上進行設定) title:"請登陸" //設定對話方塊 CSS z-index 值 //zIndex:50 }); // 對話方塊的開啟連線 $('#helpdialog_link').click(function(){ $('#helpdialog').dialog('open'); return false; }); }); </SCRIPT> <BODY> <a href="#" id="dialog_link">從此處開啟對話方塊</a></span> <div id="helpdialog" title="對話方塊的標題"> <p>對話方塊的內容</p> </div> </BODY>