官网地址：http://nyromodal.nyrodev.com/
调用方法基本上很傻瓜，只要为链接加上class="nyroModal"既可，手动调用除外，下面介绍
支持模态对话框类型：
- Ajax 调用。
<a href="http://www.xxx.com/demoSent.php" class="nyroModal">Ajax</a> - Ajax调用并支持抽取指定内容。
如果只需要显示页面上某一个元素，那么只需要在请求时把该元素ID号做为锚点加入请求地址中去。如只显示指定ID的内容：<a href="http://www.xxx.com/demoSent.php#UserInfo" class="nyroModal">Ajax</a>，则只显示test.aspx里ID号为UserInfo的元素；如果UserInfo不存在，则显示所有内容。 - 允许调整对话框的大小
- 单张图片显示（会自动缩放图片大小）。
<a href="http://nyromodal.nyrodev.com/img/img2.jpg" class="nyroModal" title="3rd Street Promenade">Image</a> - 多张图片相册显示，且支持flash显示。
下面示例中的链接多了一个rel="gal"属性，这是对图片进行分组，也就是说rel属性值相同的会分到一组显示，该值可以根据你的喜好自行修改；且在加载flash文件时，通过processHandler事件对文件类型进行判断并处理显示方式及大小
<script type="text/javascript">
$(function() {
$.nyroModalSettings({
processHandler: function(settings) {
var from = settings.from;
if (from && from.href && from.href.indexOf('http://www.youtube.com/watch?v=') == 0) {
$.nyroModalSettings({
type: 'swf',
height: 355,
width: 425,
url: from.href.replace(new RegExp("watch\\?v=", "i"), 'v/')
});
}
}
});
});
</script> - Form提交（返回结果显示在对话框内）
- Form提交并过抽取定内容（用法同Ajax）
同样，我们只需要为form元素添加class="nyroModal"属性；如果需要在IFrame的方式，那就指定target="_blank"属性；如果需要抽取部分内容显示，就指定提交目标页面的元素的ID号为锚点。
<form method="post" action="http://nyromodal.nyrodev.com/demoSent.php" class="nyroModal">
<input type="text" name="wouhou" />
<input type="submit" value="simple form"/>
</form>
<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 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> - 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 method="post" enctype="multipart/form-data" action="http://nyromodal.nyrodev.com/demoSent.php#blabla" class="nyroModal">
<input type="file" name="file" />
<input type="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> - 手动调用（看示例吧）
<script type="text/javascript">
$(function() {
$('#manual').click(function(e) {
e.preventDefault();
var content = 'Content wrote in JavaScript<br />';
jQuery.each(jQuery.browser, function(i, val) {
content+= i + " : " + val+'<br />';
});
$.nyroModalManual({
bgColor: '#3333cc',
content: content
});
return false;
});
$('#manual2').click(function(e) {
e.preventDefault();
$.nyroModalManual({
url: 'http://nyromodal.nyrodev.com/demoSent.php'
});
return false;
});
$('#manual3').click(function(e) {
e.preventDefault();
$('#imgFiche').nyroModalManual({
bgColor: '#cc3333'
});
return false;
});
$('#myValidForm').submit(function(e) {
e.preventDefault();
if ($("#myValidForm :text").val() != '') {
$('#myValidForm').nyroModalManual();
} else {
alert("Enter a value before going to " + $('#myValidForm').attr("action"));
}
return false;
});
});
</script>
<a id="manual" href="#">Manual Call</a>
<a id="manual2" href="#">Manual Call to get an ajax content</a>
<a id="manual3" href="#">Manual Call calling through an other link</a>
<form id="myValidForm" method="post" action="http://nyromodal.nyrodev.com/demoSent.php">
<input type="text" name="wouhou" />
<input type="submit" value="simple form with validation" />
</form> - Iframe 支持
- 错误处理（如果目标地址出错，则会提示错误）
- 允许指定元素做为显示容器
如果指定对象的blocker属性，则对话框会结果会显示在指定的元素内，这样做就可以避免整个页面被模态对话框遮住。
<div id="blocker"></div>
<a href="http://nyromodal.nyrodev.com/demoSent.php" id="block">blocker Modal</a>
<script type="text/javascript">
$(function() {
$('#block').nyroModal({
'blocker': '#blocker'
});
}); - 其它：关于对话框全局配置
请不要使用$.fn.nyroModal.settings = {...}的方式操作，这样会覆盖他的很多默认配置。你可以使用下面的方式，既可避免该问题：$.extend($.fn.nyroModal.settings,{...})。关于配置的详细，请参见官网。 - 其它：注意事项，配置默认对话框最小是400x300，所以如果你要显示的元素小于这个值，那你就要指定minWidth和minHeight属性了，以合对话框能自动缩放到元素的大小。
- 网方网站：http://nyromodal.nyrodev.com/
