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

完美实现在同一个页面中使用不同样式的artDialog样式的更多相关文章

  1. 修改页面中所有TextBox控件的样式--CSS

    1.HTML <div> TextBox<br /> <input type="text" name="name" value=& ...

  2. 在同一个页面中加载多个不同的jQuery版本

    <!-- 从谷歌服务器加载jQuery最新版本--> <script type="text/javascript" src="http://ajax.g ...

  3. html页面中苹果手机遇到数字换行、样式变形

    在做项目中遇到过几回苹果手机读取html页面时,如果出现一串数字,html页面会折行.变形,最后发现是因为苹果手机的打电话功能,如果html上有数字的话,苹果手机会以为是电话号码,就会改变其样式只需要 ...

  4. 在同一个页面使用多个不同的jQuery版本，让它们并存而不冲突

    - jQuery自诞生以来,版本越来越多,而且jQuery官网的新版本还在不断的更新和发布中,现已经达到了1.6.4版本,但是我们在以前的项目中就已经使用了旧版本的jQuery,比如已经出现的:1.3 ...

  5. 在同一页面中显示多个echart图表

    整理了一下大概有两种做法来实现在同一个页面中显示多个echart图表,废话不说直接上代码. 在同一个echart对象中绘制多个图表 <!DOCTYPE html> <html lan ...

  6. 在AngularJS中同一个页面配置一个或者多个ng-app

    在AngularJS学习中,对于ng-app初始化一个AngularJS程序属性的使用需要注意,在一个页面中AngularJS自动加载第一个ng-app,其他ng-app会忽略, 如果需要加载其他ng ...

  7. asp.net mvc jqgrid 同一个页面查询不同的表，jqgrid显示不同表的表头和数据并且分页

    基于我上一篇文章<a href="http://www.cnblogs.com/alasai/p/4765756.html">asp.net mvc excel导入&l ...

  8. 在同一个页面多次调用el-select选择器

    elementui是一个十分好用的组件库,但毕竟也不能做到面面俱到,有些还是要根据根据自己的实际需求做一些自定义的方法. 比如el-select选择器在同一个页面使用多次的话就会造成选择一个另一个也会 ...

  9. [转] c# 模拟Asp.net页面中的某个按钮的点击，向web服务器发出请求

    在没有做题目中所述的内容的时候,感觉这应该是很简单的东西,但是当真正开始做的时候却发现,有很多问题现在在这里写出来,供和我一样水平不高的参考一下. 在写本文之前参照了一下文章 欢迎使用CSDN论坛阅读 ...

随机推荐

  1. 【iOS】7.4 定位服务->2.1.2 定位 - 官方框架CoreLocation: CLLocationManager（位置管理器）

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  2. 剑指offer：重建二叉树

    重建二叉树的前置知识: 0.遍历二叉树: (1)前序遍历:根左右 --> 先访问根节点,再前序遍历左子树,最后前序遍历右子树: (2)中序遍历:左根右 --> 先中序遍历左子树,再访问根节 ...

  3. PHP语言开发微信公众平台（订阅号）之curl命令

    在开发过程中,经常会遇到要求用curl命令调用接口的情况 那么,什么是curl,简单来说curl是一个利用url语法规定来传输文件和哦数据的工具,支持很多协议,如 http.ftp.telent 等, ...

  4. Office 365开发概述及生态环境介绍（二）

    本文于2017年3月19日首发于LinkedIn,原文链接在这里 在上一篇 文章,我给大家回顾了Office发展过来的一些主要的版本(XP,2003,2007,2013等),以及在Office客户端中 ...

  5. HTML5周记（二）

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  6. 用 Visual Studio Code 调试 Node.js

    环境: Visual Studio Code  Node.js 1. 关闭运行中的程序 2.打开入口文件,我这里的入口文件为 app.js 3.点击左侧菜单栏的 debug 按钮 4.点击运行按钮 5 ...

  7. oracle配置监听图形界面不出来解决方法

    ROOT用户下,执行 xhost +   然后再切换到oracle用户运行netca DISPLAY 在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或 ...

  8. YII contoller控制器之间跳转的方法redirect

    一个contoller CustomerController里怎么调用另一个controller里的action,Acontoller调用SiteContoller的actionShow($id), ...

  9. Android布局优化之层级优化

    程序的每个组件和 Layout 都需要经过初始化.布局和绘制,如果布局嵌套层次过深,就会导致加载操作更为耗时,更严重的话还可能导致内存溢出.本节我们学习使用两个工具来检查和优化 Layout. Hie ...

  10. Node.js服务端框架谁才是你的真爱

    1. Express 背景: Express, 疯一般快速(而简洁)的服务端JavaScript Web开发框架,基于Node.js和V8 JavaScript引擎. Express 是一个基于 No ...