本文實例講述了jquery dialog對話方塊事件用法。分享給大家參考，具體如下：
dialog對話框事件
對話方塊應用場景
對話框是最常用、最實用的功能。
1) 靜態提示類別對話框，對話框的內容是固定的
2) 動態提示類別對話框，對話框內容是根據事件來源變化的
3) 遮罩類別對話框，對話方塊彈出時背景變灰且不可選
使用jquery ui的dialog 元件可以輕鬆實現上面三種效果
dialog元件的主要特點是可以拖曳（draggable），可以改變大小（resizable）。
dialog對話框的使用也十分簡單，選中了一個元素後，可以透過這個元素使用".dialog()"讓其變成一個對話框，透過傳遞各種options屬性類別修改對話框的各種行為。
通常一個對話框是一個div元素：
<div id="divtip" title="自定义标题"> <p>弹出层</p> </div>
下面的語句將使用預設的options屬性產生一個對話框。
jquery("#divtip").dialog();
執行完上面的語句後，這個div元素變成了一個可以拖曳、可以拉伸的對話框。
當然這只是最簡單的應用。下面透過一個完整的實例來快速上手dialog對話框元件。
使用dialog控制實現三種具體的彈出框。
一種是靜態彈出層，即彈出層的內容是固定的。
一種是動態彈出層，即彈出層的內容會根據事件的觸發者而不同。
另外一種是常見的遮罩類別彈出層，也就是彈出層顯示後，頁面上除了彈出層以外的元素都不能操作。
先看一下頁面上的幾個元素的html片段。
<!—demo 静态提示类弹出层—> <div class="ui-widget ui widget-contentui-corner-all" style="width:700px;padding:5px"> <h3>demo.共享同一个静态弹出层，弹出层内容固定：</h3> <div> <spanid="spanshowtip1">显示提示</span> <span id="spanshowtip2">显示提示</span> <spanid="spanshowtip3">显示提示</span> <span id="spanshowtip4">显示提示</span> </div> <br/> <br/> <!—demo动态显示类弹出层--> <div class="ui-widget ui-widget-contentui-corner-all" style="width:700px; padding:5px"> <h3>demo.每个弹出层内容不同，弹出层内容存在事件源的元素属性中：</h3> <div> <spanid="spanshowdatatip1" data="颜色是红色">红色</span> <span id="spanshowdatatip2" data="颜色是绿色">绿色</span> </div> </div> <br /> <br /> <!—demo.遮罩类弹出层--> <div class="ui-widget ui-widget-contentui-corner-all" style="width:700px;padding:5px"> <h3>demo.弹出iframe</h3> <div> <inputtype="button" id="bunshowiframe" name=" bunshowiframe" value="显示弹出层" /> </div> </div>
元素頁面上顯示的元素，用來觸發顯示彈出層的事件。
彈出層的html程式碼如下：
<!—提示类弹出层—> <div id="divtip" title="自定义标题"> <p>弹出层</p> </div> <!—遮罩类弹出层—> <div id="diviframe" title="iframe 弹出层" style="text-align:center"> <iframesrc="http://www.hbcsdn.tk" width="480px"height="250px" frameborder="0"></iframe> </div>
彈出層就是一個個div元素。會根據需要顯示或隱藏。
準備好了html元素，接下來就是套用jquery ui的dialog控制項。首先，在initializedom中，取得稍後需要操作的頁面元素。
initializeDom:function(){//初始化DOM
this.$spanShowTip=$("span[id^=spanShowTip]");
this.$spanShowDataTip=$("span[id^=spanShowDataTip]");
this.$btnShowIframe=$("#btnShowIframe");
this.$divTip=$("#divTip");
tis.$divIframe=$("#divIframe");
}
更多關於jquery相關內容有興趣的讀者可查看本站專題：《jquery切換特效與技巧總結》、 《jquery拖曳特效與技巧總結》、《jquery擴充技巧摘要》、《jquery常見經典特效總結》、《jquery動畫與特效用法總結》、《jquery選擇器用法總結 》及《jquery常用插件及用法總結》
希望本文所述對大家jquery程式設計有所幫助。
