基于jQuery的nyroModal模态对话框插件的使用，及IFrame方式窗口的关闭问题-优快云博客

官网地址：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提交（返回结果将显示在弹出的对话框内）

如果需要在IFrame的方式，那就指定target="_blank"属性；

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的内容。

< a href ="#test" class ="nyroModal" > DOM Element (hidden div) </ a >
< div id ="test" style ="display: none; width: 600px;" >
< a href ="http://nyromodal.nyrodev.com/demoSent.php" class ="nyroModal" > Open a new modal </ a >< br />
Test
</ div >

如上：只会在弹出窗口显示下图结果