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

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

转载于:https://www.cnblogs.com/ideas/archive/2009/09/04/jQuery-nyroModal.html