jquery nyroModal 强大的遮罩层插件 - 孝感风信网络科技有限公司移动版

相册部分用到了遮罩层效果。之前在一次项目中也有用到过，只是那时候还不知道可以使用插件呢，呵呵

主要在两个地方使用了这个效果，第一是创建相册，第二是图片查看，类似于QQ空间里照片查看的效果。发现使用插件真真的可以很快的实现，效果也是蛮好的。

nyroModal官方网站为：http://nyromodal.nyrodev.com/

强大的遮罩层，它包括以下功能：

以ajax远程加载内容
以ajax加载内容
显示图片
对话框
iframe
等等……
使用起来非常简单，可参考：
http://www.cnblogs.com/lynnlin/archive/2011/11/02/2233072.html
http://www.cnblogs.com/ideas/archive/2009/09/04/jquery-nyromodal.html

使用方法：

1.引入jquery.nyroModal-1.6.2.pack.js

2.给nyroModal层添加样式，如关闭按钮，加载等样式

jQuery弹出层nyroModal的使用

图片为附件中的对应图片

3.写页面内容

<body>
    <a href="#out" id="aa">弹出</a>
    <div id="out" style="display: none; width:200px; height:100px">
        弹出层的内容:
        <input id="content" type="text">
    </div>
</body>

其中超链接的href中#后面的要对应弹出层的id，其中id为out的层，style中的样式为弹出的宽和高

4.js代码

<script type="text/javascript">

$(function(){
   $.nyroModalSettings({
       minWidth: 200, // Minimum width
       minHeight: 100, // Minimum height
       showBackground: function (elts, settings, callback) {
           elts.bg.css({
               opacity:0
           }).fadeTo(500, 0.6, callback);
       }
   });
   $('#aa').nyroModal({
       endShowContent:function(){
       $("#content").attr("value","");
       }
   });
});
       </script>

其中minWidth和minHeight为最大和最小宽度、高度， $('#aa').nyroModal({})中aa为超链接的id，endShowContent指定函数为弹出时要执行的操作