jquery插件：SimpleModal

跨浏览器的对话框插件。插件结构比较清晰！操作很方便！
1）使用方法：
data.modal({options});
或者：
$.modal(data, {options});

data是对话框对象： jQuery 对象, DOM 节点, 或者字符串
例子:
$('<div>my data</div>').modal({options});
$('#myDiv').modal({options});
jQueryObject.modal({options});                                                        

$.modal('<div>my data</div>', {options});
$.modal('my data', {options});
$.modal($('#myDiv'), {options});
$.modal(jQueryObject, {options});
$.modal(document.getElementById('myDiv'), {options});

2）css样式：
默认情况下插件为在幕后为你创建四个dom对象：
implemodal-overlay：遮罩层
simplemodal-container：对话框容器
simplemodal-data：对话框内容
modalCloseImg: 关闭按钮图像

利用这四个对象可以自己进行控制，如附加样式，自己控制动画效果等

3）options：
*iframe: [DEPRECATED in 1.2.2]
Update your object and embed elements with the wmode property.
*overlay: [DEPRECATED in 1.2]
See opactiy, below
*opacity: (50) [renamed from overlay in 1.2]
The opacity value, from 0 - 100. 0 = transparent 100 = opaque
*overlayId: (’simplemodal-overlay’)
The DOM element id for the overlay div
*overlayCss: ({})
The CSS styling for the overlay div
*containerId: (’simplemodal-container’)
The DOM element id for the container div
*containerCss: ({})
The CSS styling for the container div
*dataCss: ({})
The CSS styling for the data div
*zIndex: (1000) [new in 1.2]
Starting z-index value
*close: (true)
Show the code in the closeHTML option (below)?
*closeTitle: [DEPRECATED in 1.2]
See closeHTML, below
*closeHTML: (‘<a class=”modalCloseImg” title=”Close”></a>’)
[new in 1.2] - 使用默认的关闭标签时SimpleModal自动为它的class再加上这个modalCloseImg.
*closeClass: (’simplemodal-close’)
类名为simplemodal-close的将被绑定关闭事件
*position: (null) [new in 1.2]
Position of container [top, left]. Can be number of pixels or percentage. If not set, SimpleModal will center the container. To

only set one value, leave the other blank. For example: [top,] or [,left].
*persist: (false)
Persist the data across modal calls? Only used for existing DOM elements. If true, the data will be maintained across modal calls,

if false, the data will be reverted to its original state
*onOpen: (null)
The callback function called in place of SimpleModal’s open function
*onShow: (null)
*The callback function called after the modal dialog has opened
*onClose: (null)
The callback function called in place of SimpleModal’s close function

4）回调函数例子：
data.modal({onOpen: function (dialog) {
  dialog.overlay.fadeIn('slow', function () {
    dialog.container.slideDown('slow', function () {
      dialog.data.fadeIn('slow');
    });
  });
}});

ata.modal({onClose: function (dialog) {
  dialog.data.fadeOut('slow', function () {
    dialog.container.slideUp('slow', function () {
      dialog.overlay.fadeOut('slow', function () {
        $.modal.close(); // must call this!
      });
    });
  });
}});

评论

1 楼 ccccccc2003 2011-03-28  

楼主，在simpleModal 1.4.1中你有没有碰到不支持utf-8的编码情况？对中文的显示在IE和FireFox中都是乱码。