jQuery 1.6版本引入了一個新的UI組件——Dialog,它可以方便地創建出彈出窗口。通過簡單的設置,你可以輕易地實現彈出框的樣式和交互效果。
//創建一個dialog窗口 $(document).ready(function(){ $("#myDialog").dialog(); }); //設置dialog參數 $(document).ready(function(){ $("#myDialog").dialog({ title: "這是一個dialog", width: 500, height: 250, modal: true, buttons: { "確認": function() { alert("你點擊了確認按鈕"); $(this).dialog("close"); }, "取消": function() { $(this).dialog("close"); } } }); });
通過上面的示例,你可以看到創建和設置Dialog窗口非常簡單。你只需要使用jQuery選擇器來選擇要進行設置的元素,然后使用dialog函數來創建一個彈出窗口。你可以使用title、width、height、modal和buttons等參數來設置彈出窗口的樣式和交互效果。其中,modal設置為true會鎖定頁面,使得用戶只能在Dialog窗口上進行操作。
彈出窗口的按鈕設置也很簡單。你只需要使用一個對象來指定每一個按鈕的名稱和點擊事件函數。在點擊事件函數中,你可以進行一些自定義的操作,并且可以通過$(this).dialog("close")函數來關閉Dialog窗口。
Dialog窗口是一個非常實用的UI組件,它可以用來實現彈出提示框、登錄框、信息確認框等等。