偶然發現artDialog.js這個插件，就被其優雅的設計及漂亮的效果深深吸引，在做例子時碰到了一些想當然它應該提供但卻沒有提供的功能，不過這都不影響我對它的喜愛，下面說一下遇到的問題吧！
artDialog.js提供了好多種彈出框樣式供我們使用，但我想在同一個頁面中使用它提供的不同彈出框樣式，遺憾的是artDialog.js並沒有提供為每一個dialog指定樣式的方法或屬性，那怎么辦呢？且看我下面的解決辦法：
我的思路是，既然每一個頁面的Dialog樣式都是由同一個CSS文件定義的，我何不通過動態改變它的CSS文件來實現我的需求呢！實驗證明我的思路是正確的，且看我的實驗代碼：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>artDialog-1</title> <link href="resources/skins/twitter.css" rel="stylesheet" /> <script src="resources/jquery.min.js" language="javascript"></script> <script src="resources/jquery.artDialog.js" language="javascript"></script> </head> <body> <button type="button" onClick="popDialog1()">基礎彈出框</button> <img src="resources/images/photo.jpg" style="width:60px; height:60px" onClick="popImg(this.src)" /> <script language="javascript"> //使用twitter風格的彈出框 function popDialog1(){ var dialog = $.dialog({ title: '歡迎', content: '歡迎使用artDialog對話框組件！', icon: 'succeed', ok: function(){ this.title('警告').content('請注意artDialog兩秒后將關閉！').lock().time(2); return false; }, button:[{name:'自定義按鈕1',callback:function(){alert('自定義按鈕1'); return false;}},{name:'button2',callback:function(){alert('button2');},focus:true}] }); } artDialog.notice = function (options) { var opt = options || {}, api, aConfig, hide, wrap, top, duration = 800; var config = { id: 'Notice', left: '100%', top: '100%', fixed: true, drag: false, resize: false, follow: null, lock: false, init: function(here){ api = this; aConfig = api.config; wrap = api.DOM.wrap; top = parseInt(wrap[0].style.top); hide = top + wrap[0].offsetHeight; wrap.css('top', hide + 'px') .animate({top: top + 'px'}, duration, function () { opt.init && opt.init.call(api, here); }); }, close: function(here){ wrap.animate({top: hide + 'px'}, duration, function () { opt.close && opt.close.call(this, here); aConfig.close = $.noop; api.close(); }); return false; } }; for (var i in opt) { if (config[i] === undefined) config[i] = opt[i]; }; return artDialog(config); }; function removeCss(filename){ //判斷文件類型 var targetelement="link"; //判斷文件名 var targetattr= "href"; var allsuspects=document.getElementsByTagName(targetelement); //遍歷元素， 並刪除匹配的元素 for (var i=allsuspects.length; i>=0; i--){ if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1) allsuspects[i].parentNode.removeChild(allsuspects[i]); } //alert(document.getElementsByTagName("head")[0].innerHTML); } //查看圖片時使用simple樣式的彈出框 function popImg(imgUrl){ removeCss('twitter.css'); //加載其他樣式的dialog樣式 loadCss('resources/skins/simple.css'); var obj = ' <img src="'+imgUrl+'" />'; $.dialog({ content:obj, lock:true, cancelVal:null, close:function(){ removeCss('simple.css'); loadCss('resources/skins/twitter.css'); } }); } </script> </body> </html>
代碼解釋：
頁面中有一個button和一個圖片，點擊button彈出twitter風格的dialog，點擊圖片彈出simple風格的dialog