<video id="h99qi"><ins id="h99qi"><span id="h99qi"></span></ins></video>

        <var id="h99qi"><td id="h99qi"></td></var>
        1. <acronym id="h99qi"></acronym>
          <wbr id="h99qi"><code id="h99qi"><span id="h99qi"></span></code></wbr>

          1. <var id="h99qi"><th id="h99qi"></th></var>
            0712-2888027 189-8648-0214
            微信公眾號

            孝感風信網絡科技有限公司微信公眾號

            當前位置:主頁 > 技術支持 > Javascript/JQuery > jquery nyroModal 強大的遮罩層插件

            jquery nyroModal 強大的遮罩層插件

            時間:2024-05-14來源:風信官網 點擊: 1005次
            相冊部分用到了遮罩層效果。之前在一次項目中也有用到過,只是那時候還不知道可以使用插件呢,呵呵

            主要在兩個地方使用了這個效果,第一是創建相冊,第二是圖片查看,類似于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 遮罩層插件
            欄目列表
            推薦內容
            熱點內容
            展開
            亚洲精品在线视频_18禁无码毛片精品久久久久久_精品熟妇无码av免费久久_午夜福利片