完美实现在同一个页面中使用不同样式的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="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