官网地址:http://nyromodal.nyrodev.com/
调用方法很简单,首先是把对应的库引用进来(<!--[if IE 6]> 部分是为了兼容IE6)
<link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nyroModal.custom.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/jquery.nyroModal-ie6.min.js"></script>
<![endif]-->
再调用如下方法:
$(function() {
$('.nyroModal').nyroModal();
});
之后,只需要为链接加上class="nyroModal"即可(手动的调用除外)
Ajax 调用。
<a href="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">Ajax</a>
Ajax调用并支持抽取指定内容。
如果只需要显示页面上某一个元素,那么只需要在请求时把该元素ID号做为锚点加入请求地址中去。如只显示指定ID的内容:
<a href="http://nyromodal.nyrodev.com/demoSent.php#UserInfo" class="nyroModal">Ajax</a>
则只显示demoSent.php里ID号为UserInfo的元素;如果UserInfo不存在,则显示所有内容。
调用图片也很简单
<a href="http://nyromodal.nyrodev.com/img/img2.jpg" class="nyroModal" title="3rd Street Promenade">Image</a>
更多的例子,可以查看官网,使用起来都是非常简单方便的。
Form提交(返回结果显示在对话框内)
Form提交并过抽取定内容(用法同Ajax)
同样,我们只需要为form元素添加class="nyroModal"属性;如果需要在IFrame的方式,那就指定target="_blank"属性;如果需要抽取部分内容显示,就指定提交目标页面的元素的ID号为锚点。
Form提交(返回结果将显示在弹出的对话框内)
<form method="post" action="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">
<input type="text" name="wouhou" />
<input type="submit" value="simple form"/>
</form>
如果需要在IFrame的方式,那就指定target="_blank"属性;
<form method="post" action="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal" target="_blank">
<input type="text" name="wouhou" />
<input type="submit" value="simple form in iframe"/>
</form>
Form提交并过抽取定内容(用法同Ajax)我们只需要为form元素添加class="nyroModal"属性;如果需要抽取部分内容显示,就指定提交目标页面的元素的ID号为锚点。
<form method="post" action="http://nyromodal.nyrodev.com/demoSent.php#test" class="nyroModal">
<input type="text" name="wouhou" />
<input type="submit" value="simple form Filtering Content"/>
</form>
以IFrame方式弹出的窗口,官网上提供的关闭弹出窗的方法例子并不管用。
通过百度和谷歌中文没找到正确的方法,最后还是谷歌了英文的站点才找到正确的关闭方法,在子窗口中调用如下代码即可
parent.$.nmTop().close();
Form提交文件上传
Form提交文件上传
<form method="post" enctype="multipart/form-data" action="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">
<input type="file" name="file"/>
<input type="submit" value="form with file"/>
</form>
Form提交文件上传并抽取指定内容(用法同Ajax)提交目标页面的元素的ID号为锚链接
<form method="post" enctype="multipart/form-data" action="http://nyromodal.nyrodev.com/demoSent.php#blabla" class="nyroModal">
<inputtype="file" name="file"/>
<inputtype="submit" value="form with file Filtering Content"/>
</form>
DOM元素显示
把调用者链接的href设置为目标元素的ID既可。注意目标元素的本身是不作为显示输出的,显示的只是其innerHTML的内容。
<div id="test" style="display: none; 600px;">
<a href="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">Open a new modal</a><br />
Test
</div>
如上:只会在弹出窗口显示下图结果