jquery1.1.1的dialog
Jquery是一種非常常用的JavaScript庫,可以幫助使用者更方便地操作HTML元素,實現許多常見效果。Jquery的1.1.1版本中加入了一個非常常用的彈窗插件 - Dialog。
要使用Dialog,我們需要先引入Jquery庫和Dialog插件。在HTML文件頭部添加以下代碼:
Dialog的使用非常容易。假設我們要在一個按鈕點擊時彈出一個對話框,可以在JavaScript部分添加以下代碼:
$(function() { $( "#dialog" ).dialog(); });
其中,#dialog是我們彈出的對話框的ID。我們需要在HTML文件中添加一個DIV元素,ID設置為dialog,將其樣式設為display:none,即:
This is the content of the dialog
這時候,我們就可以點擊按鈕看看效果了。
除了基本的使用方法,Dialog還提供許多選項,例如我們可以設置彈出框的大小和位置,和關閉時的動畫效果。以下是一些常用的選項:
$(function() { $( "#dialog" ).dialog({ autoOpen: false, // 若為true, 對話框將在初始化時自動打開 width: 500, // 對話框的寬度 height: "auto", // 對話框的高度 modal: true, // 若為true, 背景將變灰并且無法點擊,即模態框 position: { my: "center", at: "center", of: window }, // 對話框的位置,my表示對話框的參考點在中心,at表示該參考點和屏幕中心重合 show: { effect: "blind", duration: 1000 }, hide: { effect: "explode", duration: 1000 } }); });
以上就是Dialog的一些基礎用法和常用選項。希望對大家學習Jquery有所幫助。