完美实现在同一个页面中使用不同样式的artDialog样式

偶然发现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="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