官网地址：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/