炫酷JQUERY自定義對話框插件JDIALOG_JDIALOG彈出對話框和確認對話框插件

多種類型自定義對話框插件jDialog是一款基於jquery實現的輕量級多種類型的自定義對話框插件

在項目開發中、一般會美化 alert(); 的樣式、那么今天我就和大家分享一款非常炫的插件

先來看一下程序最后的效果圖片吧

下面是HTMl代碼

 

<center> <button id="test1">alert方式調用</button> <br/><br/> <button id="test2">confirm方式調用</button> <br/><br/> <button id="test3">iframe方式調用</button> <br/><br/> <button id="test4">只顯示內容對話框</button> <br/><br/> <button id="test5">對話框配置按鈕</button> <br/><br/> <button id="test6">message方式調用</button> <br/><br/> <button id="test7">tip方式調用</button> </center>

以下是JS代碼

 

 

$("#test1").click(function(){ var dialog = jDialog.alert(´歡迎使用jDialog組件，我是alert！´,{},{ showShadow: false,// 不顯示對話框陰影 buttonAlign : ´center´, events : { show : function(evt){ var dlg = evt.data.dialog; }, close : function(evt){ var dlg = evt.data.dialog; }, enterKey : function(evt){ alert(´enter key pressed!´); }, escKey : function(evt){ alert(´esc key pressed!´); evt.data.dialog.close(); } } }); }) ; $("#test2").click(function(){ var dialog = jDialog.confirm(´歡迎使用jDialog組件，我是confirm！´,{ handler : function(button,dialog) { alert(´你點擊了確定！´); dialog.close(); } },{ handler : function(button,dialog) { alert(´你點擊了取消！´); dialog.close(); } }); }); $("#test3").click(function(){ // 通過options參數，控制iframe對話框 var dialog = jDialog.iframe(´http://dwtedx.com/´,{ title : ´代碼編輯器 - dwtedx個人博客´, width : 1100, height : 550 }); }); $("#test4").click(function(){ // 通過options參數，控制dialog var dialog = jDialog.dialog({ title : ´自定義對話框´, content : ´大家好，歡迎訪問dwtedx個人博客。´ }); }); $("#test5").click(function(){ // 通過options參數，控制dialog var dialog = jDialog.dialog({ title : ´自定義對話框´, content : ´大家好，我是jDialog.dialog！´, buttons : [ { type : ´highlight´, text : ´你好´, handler:function(button,dialog) { dialog.close(); } } ] }); }); $("#test6").click(function(){ var dialog = jDialog.message(´大家好，歡迎訪問dwtedx個人博客´,{ autoClose : 3000, // 3s后自動關閉 padding : ´30px´, // 設置內部padding modal: true // 非模態，即不顯示遮罩層 }); }); $("#test7").click(function(){ var dialog = jDialog.tip(´大家好，歡迎訪問dwtedx個人博客´,{ target : $(´#test7´), position : ´left-top´, trianglePosFromStart :0, autoClose : 1000, offset : { top :-20, left:10, right:0, bottom:0 } }); });

當然、在這之前你必須引入相應的 JS 文件和 CSS 文件

那么相應的資源文件呢我已經上傳到源代碼里面了、大家可以直接下載哈

源代碼下載鏈接: http://dwtedx.com/download.html?bdkey=s/1gdxgZh5 密碼: lkpo