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!
      });
    });
  });
}});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值