simplemodal — jquery弹出窗体插件
2011-07-29 13:16
363 查看
前段时间有发过一个强大的弹出窗体插件,叫boxy,但是boxy存在bug,而且API调用谈不上方便。现在给大家介绍个同样强大的弹出窗体插件 – simplemodal(请务必使用最新版本1.33,相对于网上流传的旧的版本改善了很多)。
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
在按钮的单击事件的监听函数内初始化插件。而#basic-modal-content就是作为弹出框的内容层。
你也可以如下调用插件:
$.modal("<div><h1>SimpleModal</h1></div>");
直接往弹出窗体插入html片段。
modal的API还是很丰富的。
调用参数的例子请详见弹出表单和弹出确认框示例。
opacity :透明度
overlayId :遮罩层id
overlayCss :{Object}定义遮罩层样式
containerId :弹出窗体容器id
containerCss :定义容器的样式
dataId :内容层id
containerCss :内容层的样式
minHeight :最小高度
minWidth :最小宽度
maxHeight :最大高度
maxWidth :最大宽度
autoResize:是否自适应大小
zIndex :弹出层的z-index
close :是否允许关闭
closeHTML :自定义关闭按钮
closeClass :关闭层样式
overlayClose :点击遮罩层是否关闭弹出窗体
position :数组 [top, left] 自定义弹出窗体位置
onOpen :弹出窗体打开时候的回调函数
onShow :弹出窗体显示时候的回调函数
onClose :弹出窗体关闭时候的回调函数
官方地址:http://www.ericmmartin.com/projects/simplemodal/
点此下载作者将四个示例包分开提供下载,这里我合并成一个包。使用教程
引入jquery库和插件
<script type='text/javascript' src='js/jquery.js'></script><script type='text/javascript' src='js/jquery.simplemodal.js'></script>
初始化插件
$('#basic-modal-content').modal();在按钮的单击事件的监听函数内初始化插件。而#basic-modal-content就是作为弹出框的内容层。
你也可以如下调用插件:
$.modal("<div><h1>SimpleModal</h1></div>");
直接往弹出窗体插入html片段。
modal的API还是很丰富的。
调用参数的例子请详见弹出表单和弹出确认框示例。
现在来看下其API
appendTo :将弹出框添加到的父容器,参数为css选择器opacity :透明度
overlayId :遮罩层id
overlayCss :{Object}定义遮罩层样式
containerId :弹出窗体容器id
containerCss :定义容器的样式
dataId :内容层id
containerCss :内容层的样式
minHeight :最小高度
minWidth :最小宽度
maxHeight :最大高度
maxWidth :最大宽度
autoResize:是否自适应大小
zIndex :弹出层的z-index
close :是否允许关闭
closeHTML :自定义关闭按钮
closeClass :关闭层样式
overlayClose :点击遮罩层是否关闭弹出窗体
position :数组 [top, left] 自定义弹出窗体位置
onOpen :弹出窗体打开时候的回调函数
onShow :弹出窗体显示时候的回调函数
onClose :弹出窗体关闭时候的回调函数
相关文章推荐
- simplemodal — jquery弹出窗体插件
- jQuery simpleModal插件的使用介绍
- simplemodal — jquery弹出窗体插件
- jquery.modal.js弹出框插件
- jQuery弹出窗口插件"LeanModal.js"的使用
- jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
- LeanModal 轻量级jquery弹出层插件
- 实现jquery simplemodal弹出框可拖拽效果
- Jquery弹出窗口插件 LeanModal的使用方法
- Jquery弹出窗口插件 LeanModal的使用方法
- jQuery插件之simplemodal
- jQuery学习笔记(jquery.simplemodal插件)
- jQuery的弹出窗口插件colorbox
- 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
- 使用jQuery的message插件或js实现右下角弹出消息框
- 【使用示例】jGrowl 消息弹出框的jQuery插件
- 基于jQuery的弹出消息插件 DivAlert之旅(一)
- 使用Jquery仿模态对话框插件Remodal实现弹出响应窗口
- 自己编写Jquery弹出层插件,多种自定义...不断更新中...
- Jquery图片弹出框插件-jQuery lightBox