【jQuery.nyroModal】超强JQuery模态对话框插件

核心提示： DOM元素显示把调用者链接的href设置为目标元素的ID既可，注意目标元素的本身是不作为显示输出的，【jQuery.nyroModal】超强JQuery模态对话框插件(3)，显示的只是其innerHTML的内容，<ahref="http://p5s8.ddvip.com/inde

DOM元素显示

把调用者链接的href设置为目标元素的ID既可。注意目标元素的本身是不作为显示输出的，显示的只是其innerHTML的内容。

<a　href="http://p5s8.ddvip.com/index.php#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="http://p5s8.ddvip.com/index.php#">Manual　Call</a>
<a　id="manual2"　href="http://p5s8.ddvip.com/index.php#">Manual　Call　to　get　an　ajax　content</a>
<a　id="manual3"　href="http://p5s8.ddvip.com/index.php#">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/