jQuery控件 SimpleModal(弹出层带遮罩控件)

http://www.gjy.nev.cn/a1article-492186-1.html

概述

SimpleModal是一个轻量级的jQuery插件,它为模态窗口(modaldialog)的开发提供了一个强有力的接口。可以把它当作模态窗口(modaldialog)的框架。SimpleModal给予你(创建你能够想像到的任何东西的)灵活性,然而却屏蔽了UI开发中的跨浏览器相关问题。

用法转自:高景洋个人官网(www.gjy.nev.cn)

SimpleModal提供了两种简单方法来调用模态窗口(modaldialog)。

在作为一个链式的(chained)jQuery函数,你可以在一个jQuery元素上调用modal()函数,之后用这个元素的内容来显示一个模态窗口。例如:

1$("#element-id").modal();

在作为一个单独函数时,通过传递一个jQuery对象,DOM元素或纯文本(可以包含HTML)来创建一个模态窗口(modaldialog),例如:

1$.modal("<div><h1>SimpleModal</h1></div>");

以上的两种方法都可以接受一个可选项参数,例如:

1$("#element-id").modal({options});

2$.modal("<div><h1>SimpleModal</h1></div>",{options});

因为SimpleModal不仅仅是一个模态窗口框架(modaldialogframework),以上的两个例子只是创建非常基本的没有样式模态窗口(modaldialog)。可以通过外部CSS或选项中的属性(propertiesinoptions)来应用样式,查看下面的选项(optionsection)以获得一个可用的选项列表。

样式

可以通过外部CSS,选项对象(optionsobject)或两个一起来应用样式。modaloverlay,container,data元素的CSS选项分别是:overlayCss,containerCss,dataCss,它们都是键值对(Key/Value)属性。SimpleModal为显示一个模态窗口(modaldialog)处理设置必要的CSS,另外它动态地把模态窗口置于屏幕中间,除非预先使用了position选项。SimpleModal在内部定义了如下CSSclasses:simplemodal-overlay,simplemodal-container,simplemodal-wrap(如果内容比container大,那么它将自动设置overflow为true)和simplemodal-data。

注:

例子SimpleModal的closeHTML选项默认声明一个用于关闭模态窗口的图片样式:modalcloseImg,因为它被定义在选项里面,不能通过选项来应用样式,所以一个外部CSS定义是必需的。

1#simplemodal-containera.modalCloseImg{

2background:url(/img/x.png)no-repeat;/*adjusturlasrequired*/

3width:25px;

4height:29px;

5display:inline;

6z-index:3200;

7position:absolute;

8top:-15px;

9right:-18px;

10cursor:pointer;

11}

IE6,你可能想使用PNG:

1<!--[ifltIE7]>

2<styletype='text/css'>

3#simplemodal-containera.modalCloseImg{

4background:none;

5right:-14px;

6width:22px;

7height:26px;

8filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(

9src='img/x.png',sizingMethod='scale'

10);

11}

12</style>

13<![endif]-->

下载

SimpleModal托管于GoogleCode上:DOWNLOAD

有两个可用的版本:1、完整版:包含注释并且带有易于阅读的格式;2、最小版:包含注释但是删除了格式,不易于阅读。完整版可以用来学习和测试,最小版可以用作产品使用。

文档

选项和回调

选项

以下是当前选项的一个列表,默认值在[Type:Value]中说明

appendTo[String:'body']

focus[Boolean:true]把焦点保持在模态窗口(modaldialog)上

opacity[Number:50]设置overlaydiv的不透明度,1-100

overlayId[String:'simplemodal-overlay']overlaydiv的DOM元素的ID

overlayCss[Object:{}]overlaydiv的CSS样式

containerId[String:'simplemodal-container']containerdiv的DOM元素的ID

containerCss[Object:{}]containerdiv的CSS样式

dataId[String:'']datadiv的DOM元素的ID

dataCss[Object:{}]datadiv的CSS样式

minHeight[Number:200]container的最小高度

minWidth[Number:200]container的最小宽度

maxHeight[Number:null]container的最大高度,如果没有说明则使用window的高度

maxWidth[Number:null]container的最大宽度,如果没有说明则使用window的宽度

autoResize[Boolean:false]当window调整大小时调整container的大小,使用时需小心,因为它可能会发生不可预知的效果。

zIndex[Number:1000]z-Index的起始值

close[Boolean:true]如果为true,那么closeHTML,escClose,overClose将被使用,反之则不使用。

closeHTML[String:'']

closeClass[String:'simplemodal-close']

escClose[Boolean:true]

overlayClose[Boolean:false]

position[Array:null]

persist[Boolean:false]

onOpen[Function:null]

onShow[Function:null]

onClose[Function:null]

回调转自:高景洋个人官网(www.gjy.nev.cn)

回调函数使用JavaScript的apply函数来调用

相关推荐