0712-2888027 189-8648-0214
微信公眾號(hào)

孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號(hào)

當(dāng)前位置:主頁(yè) > 技術(shù)支持 > Javascript/JQuery > jquery nyroModal 強(qiáng)大的遮罩層插件

jquery nyroModal 強(qiáng)大的遮罩層插件

時(shí)間:2016-07-12來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 1158次
相冊(cè)部分用到了遮罩層效果。之前在一次項(xiàng)目中也有用到過(guò),只是那時(shí)候還不知道可以使用插件呢,呵呵

主要在兩個(gè)地方使用了這個(gè)效果,第一是創(chuàng)建相冊(cè),第二是圖片查看,類似于QQ空間里照片查看的效果。發(fā)現(xiàn)使用插件真真的可以很快的實(shí)現(xiàn),效果也是蠻好的。

nyroModal官方網(wǎng)站為:http://nyromodal.nyrodev.com/

強(qiáng)大的 遮罩層, 它包括以下功能:

以ajax遠(yuǎn)程加載內(nèi)容
以ajax加載內(nèi)容
顯示圖片
對(duì)話框
iframe
等等……
使用起來(lái)非常簡(jiǎn)單,可參考:
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層添加樣式,如關(guān)閉按鈕,加載等樣式

jQuery彈出層nyroModal的使用

圖片為附件中的對(duì)應(yīng)圖片

3.寫頁(yè)面內(nèi)容

<body>  
    <a href="#out" id="aa">彈出</a>  
    <div id="out" style="display: none; width:200px; height:100px">  
        彈出層的內(nèi)容:  
        <input id="content" type="text">  
    </div>  
</body>  

其中超鏈接的href中#后面的要對(duì)應(yīng)彈出層的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指定函數(shù)為彈出時(shí)要執(zhí)行的操作
熱門關(guān)鍵詞: jquery nyroModal 遮罩層插件
欄目列表
推薦內(nèi)容
熱點(diǎn)內(nèi)容
展開(kāi)