JS 弹出框 jquery 弹出层

               

几种皮肤式样

 

 

 

 

 

功能：

//1. 传入字符串art.dialog({    content: '我支持HTML'});

 

效果：

 

 

/*2. 传入HTMLElement备注：1、元素不是复制而是完整移动到对话框中，所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框，会设置display:block属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置，style display属性也将恢复*/art.dialog({    content: document.getElementById('demoCode_content_DOM'),    id: 'EF893L'});

 效果：把指定的div加载到这个弹框上

 

 

//标题 [title]art.dialog({    title: 'hello world!'});

  效果：

 

 

/*确定取消按钮 [ok & cancel]备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭*/art.dialog({    content: '如果定义了回调函数才会出现相应的按钮',    ok: function () {     this.title('3秒后自动关闭').time(3);        return false;    },    cancelVal: '关闭',    cancel: true //为true等价于function(){}});

 

  效果：

 

/*自定义按钮 [button]备注：回调函数this指向扩展接口，如果返回false将阻止对话框关闭；button参数对应的扩展方法名称也是"button"*/art.dialog({    id: 'testID',    content: 'hello world!',    button: [        {            name: '同意',            callback: function () {                this.content('你同意了').time(2);                return false;            },            focus: true        },        {            name: '不同意',            callback: function () {                alert('你不同意')            }        },        {            name: '无效按钮',            disabled: true        },        {            name: '关闭我'        }    ]});

    效果：  

 

//定时关闭的消息 [time]art.dialog({    time: 2,    content: '两秒后关闭'});

 

  效果：  

 

 

/*定义消息图标 [icon]请查看skin/icons目录下的图标*/art.dialog({    icon: 'succeed',    content: '我可以定义消息图标哦'});

 

 

  效果：

 

 

//锁屏 [lock & background & opacity]art.dialog({    lock: true,    background: '#600', // 背景色    opacity: 0.87, // 透明度    content: '中断用户在对话框以外的交互，展示重要操作与消息',    icon: 'error',    ok: function () {        art.dialog({content: '再来一个锁屏', lock: true});        return false;    },    cancel: true});

 

 

  效果：这是个锁屏的你可自定义背景颜色和图标等等一些属性

 

 

//自定义坐标 [left & top]art.dialog({    left: 100,    top: '60%',    content: '我改变坐标了'});

 

  效果：

 

//创建一个全屏对话框art.dialog({    width: '100%',    height: '100%',    left: '0%',    top: '0%',    fixed: true,    resize: false,    drag: false})

 效果：

 

//右下角滑动通知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);};//调用示例：art.dialog.notice({    title: '万象网管',    width: 220,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能//导致artDialog收缩    content: '尊敬的顾客朋友，您IQ卡余额不足10元，请及时充值',    icon: 'face-sad',    time: 5});

 

 

 

//跨域访问//跨域访问无法自适应大小，也无法进行父页面与子页面数据交换art.dialog.open('http://www.connect.renren.com/igadget/renren/index.html',    {title: '人人网', width: 320, height: 400});

 

 

 

//加载googleMAPart.dialog.open('googleMaps.html');

 

 

 

 

换皮肤只要换上下面图片上的css文件名就可以

 

****************************************************************
用法
1.导入

<script src="artDialog/artDialog.js?skin=default"></script>

2.加上

(function (config) {    config['lock'] = true;    config['fixed'] = true;    config['okVal'] = 'Ok';    config['cancelVal'] = 'Cancel';    // [more..]})(art.dialog.defaults);//这个是用哪个主题有很多主题的你把名字打上就行啦

 

googleMap的代码