弹出层showDialog

当前版本:V1.2.6 最近更新:2011-01-07 组件作者:xylonhuang

 

组件说明

弹出一个块元素(如:div等)或iframe(如果域名不同需要在子页面和父页面添加document.domain=”qq.com”)背部是“遮罩”效果。

支持:

  • 弹出框背景颜色、背景透明度可自定义
  • 弹出前、后CallBack操作
  • 弹出iframe高度自适应
  • 自定义消息弹出
  • 超长弹层
  • 等等...
  • milo版本支持ESC关闭、无障碍等

注意:milo版和非milo版本不要一起使用

更新日志

  • 后续不会独立为此插件做功能更新(重大bug除外),只在milo里面更新。
  • 2011/11/03:更新到1.1.9。
  • 2011/04/12:更新到1.1.6,修复在ie6下大弹出框的一个bug。
  • 2011/1/7:更新到1.1.5,修复弹出层大于视窗高度的一个bug。

使用方式

统一调用代码

http://ossweb-img.qq.com/images/js/comm/showDialog.min.js

非milo版参数列表:

/*...*/
  this.id = a.id || null;                                                                   //弹出的id,非自定义消息和iframe的时候必选
  this.bgcolor = a.bgcolor || '#111';                                                       //背景颜色和默认值
  this.opacity = a.opacity || 70;                                                           //透明度和默认值
  this.src = a.src || null;                                                                 //弹出iframe的路径
  this.iWidth = a.iWidth || 'auto';                                                         //弹出iframe的宽度,默认自适应
  this.iHeight = a.iHeight || 'auto';                                                       //弹出iframe的高度,默认自适应
  this.sMsg = a.sMsg || null;                                                               //弹出自定义消息
  this.sClass = a.sClass || null;                                                           //弹出自定义消息的样式,只能是class
  this.sStyles = a.sStyle || 'padding:10px;border:4px solid #dedede;background-color:#fff'; //弹出自定义消息的样式,可以输入style
  this.sTime = a.sTime || null;                                                             //延迟弹出的时间
  this.delayPop = a.delayPop || false;                                                      //是否需要延迟弹出的开关
  this.onPopupCallback = a.onPopupCallback || null;                                         //弹出前触发
  this.onCloseCallback = a.onCloseCallback || null;                                         //关闭时触发
/*...*/

milo版多了一下几个参数(建议用milo版本),调用方法一样:

/*...*/
    this.fixed         = _p.fixed        || false;                //是否需要固定弹出对象不随滚动条滚动,fixed为ture的时候,不随滚动条滚动
    this.iTop          = _p.iTop         || _sAuto;               //fixed为true的时候,弹出对象距离浏览器顶部的距离,默认居中
    this.sPzIndex      = _p.PopzIndex    || 9999;                 //弹出层的z-index,可定义,最小为9,最大9999
    this.isNoAccessible  = _p.isNoAccessible || false;            //关闭对无障碍支持(如esc关闭、默认焦点、tab焦点切换等等)
/*...*/

1、自定义弹出框颜色、背景透明度

showDialog.show({
    id:"pic",//需要弹出的id,如果是弹出页面上的div,则该选项为必选
    bgcolor:"#000",//弹出“遮罩”的颜色,格式为"#FF6600",可选,默认为"#111"
    opacity:60//弹出“遮罩”的透明度,格式为{10-100},可选
});

2、支持弹出前、后CallBack操作,直接传入函数

showDialog.show({
    id:"pic",//需要弹出的id,如果是弹出页面上的div,则该选项为必选
    onPopupCallback:function(){alert("在弹出框弹出前运行这个函数")},//函数名,或者是匿名函数,可选
    onCloseCallback:function(){alert("在弹出框关闭后运行这个函数")}//函数名,或者是匿名函数,可选
});

3、弹出iframe高度自适应

showDialog.show({
src:"ifram.html",//需要弹出的iframe的路径,必选
Width:512,//iframe的宽度,必选
Height:"auto"//如果要求iframe自适应,值为"auto",如果不要自适应,则直接为需要设定的高度,如314,必选
});

4、自定义消息弹出

showDialog.show({
    sMsg:"Hello...",//必选。内容可以为文本,也可以为html结构
    sStyle:"width:500px;border:4px solid #ccc;padding:10px;background-color:#fff",//可选,自定义消息框的样式
    sClass:"pop",//可选,自定义消息框的样式类名
    sTime:3000 //可选,多少秒后自动关闭,默认为点击弹出框以外的“遮罩”关闭
});

5、关闭弹出层

关闭统一使用showDialog.hide()

showDialog.hide()

6、其他应用

在iframe里面,如果父页面有showDialog脚本,则iframe不需要在引入该脚本,只需要:

var showDialog=parent.showDialog;
//直接调用父页面的脚本,然后直接使用
showDialog.show({/*......*/});

参数过多,不方便写调用的话,可以这样:

function p1(){
    showDialog.show({
        id:'error',
        bgcolor:'#f60',
        opacity:30,
        onPopupCallback:function(){
            alert('在弹出框弹出前运行这个函数')
            }
    });
}

//然后直接使用<button onclick="p1()">弹出</button>

DEMO演示

弹出层非milo版本案例效果演示;

milo版本

milo版showdialog跟之前的版本使用方式上一样,只是引入方式不一样,同时,在该版本上新增了fixed方法,可以设定弹出框是否随屏幕滚动以及该弹出框在页面上弹出距顶部的位置。

JS调用方法

需要引入milo

http://ossweb-img.qq.com/images/js/milo/milo-min.js
function TGDialogS(e){
	need("biz.dialog-min",function(Dialog){
		Dialog.show({
			id:e,
			bgcolor:'#000', //弹出“遮罩”的颜色,格式为"#FF6600",可修改,默认为"#fff"
			opacity:50      //弹出“遮罩”的透明度,格式为{10-100},可选
		});
	});
}
function closeDialog(){
	need("biz.dialog-min",function(Dialog){
		Dialog.hide();
	});
}

JS调用方法:

function showPic(){
 need("biz.dialog-min",function(Dialog){
 Dialog.show({
 id:"pic",
 bgcolor:"#000",
 fixed:true,//该值默认为false,当为true的时候,将随屏幕滚动
 iTop:120,//当fixed为ture的时候可选,默认为垂直居中,设置为120的时候,表示该弹出框弹出的时候距离顶部距离120px.
 opacity:60
 });
 });
 }

DEMO演示

弹出层milo版本案例 效果演示