下次自动登录
现在的位置:
& 综合 & 正文
simplemodal — jquery弹出窗体插件
引入jquery库和插件
<ol class="hl-main ln-show" title="Double click to hide line number." ondblclick="function ondblclick()
linenumber(this)
&script type='text/javascript' src='js/jquery.js'&&/script&
&script type='text/javascript' src='js/jquery.simplemodal.js'&&/script&
初始化插件
<ol class="hl-main ln-show" title="Double click to hide line number." ondblclick="function ondblclick()
linenumber(this)
$('#basic-modal-content').modal();
在按钮的单击事件的监听函数内初始化插件。而#basic-modal-content就是作为弹出框的内容层。你也可以如下调用插件：
<ol class="hl-main ln-show" title="Double click to hide line number." ondblclick="function ondblclick()
linenumber(this)
$.modal("&div&&h1&SimpleModal&/h1&&/div&");
直接往弹出窗体插入html片段。modal的API还是很丰富的。调用参数的例子请详见弹出表单和弹出确认框示例。
&&&&推荐文章:
【上篇】【下篇】一个很好用的Jquery自定义弹窗插件simplemodal
窗体API定义丰富，而且使用也很容易上手。
官方地址：
从官方下载插件，在文件中引用
&script type='text/javascript'
src='js/jquery.js'&&/script&
&script type='text/javascript'
src='js/jquery.simplemodal.js'&&/script&
使用方法具体可以从官方网站下载带例子的压缩包，很容易上手。
$("#element-id").modal();引入内容块
$.modal("&div&&h1&SimpleModal&/h1&&/div&");
直接添加html代码
$("#element-id").modal({options});
$.modal("&div&&h1&SimpleModal&/h1&&/div&", {options});
带自定义选项的使用
现在看看它的自定义选项：
appendTo ：将弹出框添加到的父容器，参数为css选择器opacity ：透明度overlayId ：遮罩层idoverlayCss
：{Object}定义遮罩层样式containerId ：弹出窗体容器idcontainerCss ：定义容器的样式dataId ：内容层idcontainerCss ：内容层的样式minHeight ：最小高度minWidth ：最小宽度maxHeight ：最大高度maxWidth
：最大宽度autoResize：是否自适应大小zIndex ：弹出层的z-indexclose ：是否允许关闭closeHTML ：自定义关闭按钮closeClass ：关闭层样式overlayClose
：点击遮罩层是否关闭弹出窗体position ：数组 [top, left]
自定义弹出窗体位置onOpen
：弹出窗体打开时候的回调函数onShow
：弹出窗体显示时候的回调函数onClose
：弹出窗体关闭时候的回调函数
The following is a list of current options. Default values are
indicated with: [Type:Value]
[String:'body']
The jQuery selector to append the elements to. For ASP.NET, use
[Boolean:true] (Changed in 1.4)
Focus in the first visible, enabled element?
[Number:50]
The opacity value for the overlay div, from 0 - 100
[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
[String:'simplemodal-data']
The DOM element id for the data div
[Object:{}]
The CSS styling for the data div
[Number:null]
The minimum height for the container
[Number:null]
The minimum width for the container
[Number:null]
The maximum height for the container. If not specified, the window
height is used.
[Number:null]
The maximum width for the container. If not specified, the window
width is used.
autoResize
[Boolean:false] (Changed in
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
[Number: 1000]
Starting z-index value
[Boolean:true]
If true, closeHTML, escClose and
overClose will be used if set. If false, none of them
will be used.
[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
[Boolean:true]
Allow Esc keypress to close the dialog?
overlayClose
[Boolean:false]
Allow click on overlay to close the dialog?
[Array:null]
Position of container [top, left]. Can be number of pixels or
percentage
[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.
[Boolean:true] (Added in 1.3.4. Name changed
from transient in 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.
[Function:null]
The callback function used in place of SimpleModal's open
[Function:null]
The callback function used after the modal dialog has opened
[Function:null]
The callback function used in place of SimpleModal's close
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。jquery.simplemodal-1.4.4 是一个轻量级 插件提供 用于创建模式对话框的强大框架。 JavaScript 238万源代码下载-
&文件名称: jquery.simplemodal-1.4.4
& & & & &&]
&&所属分类:
&&开发工具: JavaScript
&&文件大小: 7 KB
&&上传时间:
&&下载次数: 10
&&提 供 者:
&详细说明：SimpleModal是一个轻量级jQuery插件提供一个用于创建模式对话框的强大框架。由于是一个框架，它可以给予你极大的灵活性来构建你想要的任意模式对话框。-SimpleModal is a lightweight jQuery plugin provides a powerful framework used to create modal dialog. As a framework, it can give you great flexibility in any mode you want to build a dialog box.
文件列表(点击判断是否您需要的文件，如果是垃圾请在下面评价投诉):
&&jquery.simplemodal-1.4.4.js
&近期下载过的用户:
&相关搜索:
&输入关键字，在本站238万海量源码库中尽情搜索：
&[] - 超炫的模式窗体，simplmodal实现扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
JQuery弹出框插件simplemodal
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer-4.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口}