http://www.gjy.nev.cn/a1article-492186-1.html
概述
SimpleModal是一个轻量级的jQuery插件,它为模态窗口(modal dialog)的开发提供了一个强有力的接口。可以把它当作模态窗口(modal dialog)的框架。SimpleModal给予你(创建你能够想像到的任何东西的)灵活性,然而却屏蔽了UI开发中的跨浏览器相关问题。
用法 转自:高景洋个人官网(www.gjy.nev.cn)
SimpleModal提供了两种简单方法来调用模态窗口(modal dialog)。
在作为一个链式的(chained)jQuery函数,你可以在一个jQuery元素上调用modal()函数,之后用这个元素的内容来显示一个模态窗口。例如:
1 $("#element-id").modal();
在作为一个单独函数时,通过传递一个jQuery对象,DOM元素或纯文本(可以包含HTML)来创建一个模态窗口(modal dialog),例如:
1 $.modal("<div><h1>SimpleModal</h1></div>");
以上的两种方法都可以接受一个可选项参数,例如:
1 $("#element-id").modal({options});
2 $.modal("<div><h1>SimpleModal</h1></div>", {options});
因为SimpleModal不仅仅是一个模态窗口框架(modal dialog framework),以上的两个例子只是创建非常基本的没有样式模态窗口(modal dialog)。可以通过外部CSS或选项中的属性(properties in options)来应用样式,查看下面的选项(option section)以获得一个可用的选项列表。
样式
可以通过外部CSS,选项对象(options object)或两个一起来应用样式。modal overlay,container,data元素的CSS选项分别是:overlayCss,containerCss,dataCss,它们都是键值对(Key/Value)属性。SimpleModal为显示一个模态窗口(modal dialog)处理设置必要的CSS,另外它动态地把模态窗口置于屏幕中间,除非预先使用了position选项。SimpleModal在内部定义了如下CSS classes:simplemodal-overlay,simplemodal-container,simplemodal-wrap(如果内容比 container大,那么它将自动设置overflow为true)和simplemodal-data。
注:
例子SimpleModal的closeHTML选项默认声明一个用于关闭模态窗口的图片样式:modalcloseImg,因为它被定义在选项里面,不能通过选项来应用样式,所以一个外部CSS定义是必需的。
1 #simplemodal-container a.modalCloseImg {
2 background:url(/img/x.png) no-repeat; /* adjust url as required */
3 width:25px;
4 height:29px;
5 display:inline;
6 z-index:3200;
7 position:absolute;
8 top:-15px;
9 right:-18px;
10 cursor:pointer;
11 }
IE6,你可能想使用PNG:
1 <!--[if lt IE 7]>
2 <style type='text/css'>
3 #simplemodal-container a.modalCloseImg {
4 background:none;
5 right:-14px;
6 width:22px;
7 height:26px;
8 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
9 src='img/x.png', sizingMethod='scale'
10 );
11 }
12 </style>
13 <![endif]-->
下载
SimpleModal托管于Google Code上:DOWNLOAD
有两个可用的版本:1、完整版:包含注释并且带有易于阅读的格式;2、最小版:包含注释但是删除了格式,不易于阅读。完整版可以用来学习和测试,最小版可以用作产品使用。
文档
选项和回调
选项
以下是当前选项的一个列表,默认值在[Type:Value]中说明
appendTo [String:'body']
focus [Boolean:true] 把焦点保持在模态窗口(modal dialog)上
opacity [Number:50] 设置overlay div的不透明度,1-100
overlayId [String:'simplemodal-overlay'] overlay div的DOM元素的ID
overlayCss [Object:{}] overlay div的CSS样式
containerId [String:'simplemodal-container'] container div的DOM元素的ID
containerCss [Object:{}] container div的CSS样式
dataId [String:''] data div的DOM元素的ID
dataCss [Object:{}] data div的CSS样式
minHeight [Number:200] container的最小高度
minWidth [Number:200] container的最小宽度
maxHeight [Number:null] container的最大高度,如果没有说明则使用window的高度
maxWidth [Number:null] container的最大宽度,如果没有说明则使用window的宽度
autoResize [Boolean:false] 当window调整大小时调整container的大小,使用时需小心,因为它可能会发生不可预知的效果。
zIndex [Number:1000] z-Index的起始值
close [Boolean:true] 如果为true,那么closeHTML,escClose,overClose将被使用,反之则不使用。
closeHTML [String:'']
closeClass [String:'simplemodal-close']
escClose [Boolean:true]
overlayClose [Boolean:false]
position [Array:null]
persist [Boolean:false]
onOpen [Function:null]
onShow [Function:null]
onClose [Function:null]
回调 转自:高景洋个人官网(www.gjy.nev.cn)
回调函数使用JavaScript的apply函数来调用
分享到:
相关推荐
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为。该插件激活时,会组织用户在页面进行的操作,直到插件被关闭。
摘要:脚本资源,Ajax/JavaScript,JS框架 一款JavaScript 框架:它对脑力记忆要求更低,应用更轻松;... 我承认,jQuery 是优秀的,特别是基于 jQuery 的特效、控件非常之多,为 jQuery 增色不少。
它集成了特效、控件,可以一句代码就实现常见特效、控件,功能更强大;它是国产的。它包含JS日历组件、下拉菜单、图像渐显效果、cookie应用、文本编辑器、滚动条、Tab、遮罩等常用网页特效组件。
弹出框的样式内容你自己定义,展示部分交给插件代码来完成。 使用说明: $("selector").showLayers({ closeLayer: {btn: "selector", auto: false, seconds: 3, callback: function () {}}, // 关闭层 maskLayer...
基于Bootstrap 2.3.2,相关的其他插件包括图标控件FontAwesome、等待提示控件Spinjs(修改版)、弹窗控件lhgdialog(修改版) 主要展现: 封装请求参数(查询、排序、分页,不再需要data和dataSrc) 封装返回数据 自定义...
modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } , "关闭": function() { p1_dialog_seniorSearch.dialog( "close" ); } }, open:functio
18、修复一处隐秘BUG:当使用Ctrl+回车提交表单并弹出对话框时导致弹出新窗口 (因为此时焦点在对话框关闭链接上,这个快捷键让很多浏览器新建窗口) 19、重新绘制'earo'皮肤,修复毛边的问题 20、修复拖动的时候...
基于Bootstrap 2.3.2,相关的其他插件包括图标控件FontAwesome、等待提示控件Spinjs(修改版)、弹窗控件lhgdialog(修改版) 主要展现: 封装请求参数(查询、排序、分页,不再需要data、dataFilter和dataSrc) 封装返回...
100多行代码,实现正在加载提示框,iframe遮罩,ie6下可遮罩select下拉框,或者其他控件,代码量少,方法定义灵活。且还有简单的警告,错误,成功消息提示插件。支持自动调用回调函数。(与jQuery结合使用,效果更佳)...
多层嵌套的,高度可定制的功能强大的对话框插件, 对话框类型,包括模式对话框,警报对话框,遮罩层,吐司对话框 指南,演示和文件 资源管理器开启 Vuejs版本: dialogs 如果您认为此项目有帮助,请给它加注星标。 ...
Java zip压缩包查看程序,应用弹出文件选择框,选择ZIP格式的压缩文件,可以像Winrar软件一样查看压缩文件内部的文件及文件夹,源码截图如上所示。 Java 数字签名、数字证书生成源码 2个目标文件 摘要:JAVA源码,...
Java zip压缩包查看程序源码 1个目标文件 摘要:Java源码,文件操作,压缩包查看 Java zip压缩包查看程序,应用弹出文件选择框,选择ZIP格式的压缩文件,可以像Winrar软件一样查看压缩文件内部的文件及文件夹,源码...