jQuery插件之simplemodal
2015-11-05 14:25
573 查看
1、simplemodal在内部定义了如下css类
2、关闭窗口
simplemodal自动为弹出窗口内class是“simplemodal-close”的元素绑定了关闭函数。故,只要添加这个类就可以关闭功能。
也可以调用$.modal.close()的方式关闭打开的弹出窗口。
如果不想用插件内定的class名称为关闭函数类,可以自定义,方法如下:
当然,如果想修改多个默认参数,可以使用如下代码:
3、现在看看它的自定义选项:
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 :弹出窗体关闭时候的回调函数
The jQuery selector to append the elements to. For ASP.NET, use 'form'.
Focus in the first visible, enabled element?
The opacity value for the overlay div, from 0 - 100
The DOM element id for the overlay div
The CSS styling for the overlay div
The DOM element id for the container div
The CSS styling for the container div
The DOM element id for the data div
The CSS styling for the data div
The minimum height for the container
The minimum width for the container
The maximum height for the container. If not specified, the window height is used.
The maximum width for the container. If not specified, the window width is used.
Resize the container if it exceeds the browser window dimensions?
Automatically position the container upon creation and on window resize?
Starting z-index value
If true,
The HTML for the default close link. SimpleModal will automatically add the closeClass to this element.
The CSS class used to bind to the close event
Allow Esc keypress to close the dialog?
Allow click on overlay to close the dialog?
Position of container [top, left]. Can be number of pixels or percentage
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.
User will be unable to interact with the page below the modal or tab away from the dialog. If false, the overlay, iframe, and certain events will be disabled allowing the user to interact with the page below the dialog.
The callback function used in place of SimpleModal's open
The callback function used after the modal dialog has opened
The callback function used in place of SimpleModal's close
simplemodal-overlay:遮罩 simplemodal-container:弹出窗口容器 simplemodal-wrap simplemodal-data
2、关闭窗口
simplemodal自动为弹出窗口内class是“simplemodal-close”的元素绑定了关闭函数。故,只要添加这个类就可以关闭功能。
也可以调用$.modal.close()的方式关闭打开的弹出窗口。
如果不想用插件内定的class名称为关闭函数类,可以自定义,方法如下:
$.modal.defaults.closeClass = "modalClose";
当然,如果想修改多个默认参数,可以使用如下代码:
$.extend($.modal.defaults,{ closeClass:"modalClose", closeHTML:"<a href='#'>Close</a>" });
3、现在看看它的自定义选项:
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 :弹出窗体关闭时候的回调函数
Options
The following is a list of current options. Default values are indicated with: [Type:Value]appendTo[String:'body']
The jQuery selector to append the elements to. For ASP.NET, use 'form'.
focus[Boolean:true] (Changed in 1.4)
Focus in the first visible, enabled element?
opacity[Number:50]
The opacity value for the overlay div, from 0 - 100
overlayId[String:'simplemodal-overlay']
The DOM element id for the overlay div
overlayCss[Object:{}]
The CSS styling for the overlay div
containerId[String:'simplemodal-container']
The DOM element id for the container div
containerCss[Object:{}]
The CSS styling for the container div
dataId[String:'simplemodal-data']
The DOM element id for the data div
dataCss[Object:{}]
The CSS styling for the data div
minHeight[Number:null]
The minimum height for the container
minWidth[Number:null]
The minimum width for the container
maxHeight[Number:null]
The maximum height for the container. If not specified, the window height is used.
maxWidth[Number:null]
The maximum width for the container. If not specified, the window width is used.
autoResize[Boolean:false] (Changed in 1.4)
Resize the container if it exceeds the browser window dimensions?
autoPosition[Boolean:true] (Changed in 1.4)
Automatically position the container upon creation and on window resize?
zIndex[Number: 1000]
Starting z-index value
close[Boolean:true]
If true,
closeHTML,
escCloseand
overClosewill be used if set. If false, none of them will be used.
closeHTML[String:'']
The HTML for the default close link. SimpleModal will automatically add the closeClass to this element.
closeClass[String:'simplemodal-close']
The CSS class used to bind to the close event
escClose[Boolean:true]
Allow Esc keypress to close the dialog?
overlayClose[Boolean:false]
Allow click on overlay to close the dialog?
position[Array:null]
Position of container [top, left]. Can be number of pixels or percentage
persist[Boolean: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.
modal[Boolean:true] (Added in 1.3.4. Name changed from
transientin 1.3.5))
User will be unable to interact with the page below the modal or tab away from the dialog. If false, the overlay, iframe, and certain events will be disabled allowing the user to interact with the page below the dialog.
onOpen[Function:null]
The callback function used in place of SimpleModal's open
onShow[Function:null]
The callback function used after the modal dialog has opened
onClose[Function:null]
The callback function used in place of SimpleModal's close
相关文章推荐
- jquery datatable 资源
- jQuery闭包
- 通过Jquery判断页面元素是否在浏览器的可视区域内
- jquery日历插件
- 通过jQuery的attr修改onclick
- JQUERY修改背景图片
- jQuery源码分析之$.get/$.post/serialize/serializeArray方法详解
- jQuery EasyUI 表单插件 - Datebox 日期框
- 使用JQuery实现的分页插件分享
- 表单验证插件jquery.validate.js
- Jquery validationEngine使用的两种方式 客户端方重复提交
- jQuery-1.9.1源码分析系列(二)jQuery选择器续2——筛选
- jQuery EasyUI使用教程之在面板中创建复杂布局
- Jquery增加和移除属性操作
- jQuery中attr()和prop()在修改checked属性时的区别
- (转载)推荐几个非常实用的JQuery代码片段
- 锋利的jQuery书中推荐的几款插件
- jquery实现公告上下滚动显示
- jQuery:实现两个<select>控件的互移操作
- jquery-TreeTable