simplemodal — jquery弹出窗体插件

前段时间有发过一个强大的弹出窗体插件，叫boxy，但是boxy存在bug，而且API调用谈不上方便。现在给大家介绍个同样强大的弹出窗体插件 – simplemodal（请务必使用最新版本1.33，相对于网上流传的旧的版本改善了很多）。

官方地址：http://www.ericmmartin.com/projects/simplemodal/

点此下载

作者将四个示例包分开提供下载，这里我合并成一个包。

使用教程

引入jquery库和插件

1. <script type='text/javascript' src='js/jquery.js'></script>
2. <script type='text/javascript' src='js/jquery.simplemodal.js'></script>

初始化插件

1. $('#basic-modal-content').modal();

在按钮的单击事件的监听函数内初始化插件。而#basic-modal-content就是作为弹出框的内容层。
你也可以如下调用插件：

1. $.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 ：弹出窗体关闭时候的回调函数