<tr id="frcqn"></tr>
<strong id="frcqn"><optgroup id="frcqn"></optgroup></strong>
<tr id="frcqn"></tr>
<tr id="frcqn"></tr>
<tr id="frcqn"></tr>
  • 0712-2888027 189-8648-0214
    微信公眾號

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

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

    jquery nyroModal 強大的遮罩層插件

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

    主要在兩個地方使用了這個效果,第一是創建相冊,第二是圖片查看,類似于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 遮罩層插件
    欄目列表
    推薦內容
    熱點內容
    展開
    强奸乱伦之影音先锋,播放器男女免费,精品一区二区自拍偷拍,xxxxx日韩
    <tr id="frcqn"></tr>
    <strong id="frcqn"><optgroup id="frcqn"></optgroup></strong>
    <tr id="frcqn"></tr>
    <tr id="frcqn"></tr>
    <tr id="frcqn"></tr>