0712-2888027 189-8648-0214
微信公众号

孝感风信网络科技有限公司微信公众号

当前位置:主页 > 技术支持 > Javascript/JQuery > jquery nyroModal 强大的遮罩层插件

jquery nyroModal 强大的遮罩层插件

时间:2021-09-19来源:风信官网 点击: 560次
相册部分用到了遮罩层效果。之前在一次项目中也有用到过,只是那时候还不知道可以使用插件呢,呵呵

主要在两个地方使用了这个效果,第一是创建相册,第二是图片查看,类似于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指定函数为弹出时要执行的操作
热门关键词: jquery nyroModal 遮罩层插件
栏目列表
推荐内容
热点内容
展开