layer-彈出框

      layer是一款近年來備受青睞的web彈層組件，她具有全方位的解決方案，致力於服務各水平段的開發人員，您的頁面會輕鬆地擁有豐富友好的操做體驗。layer 兼容了包括 IE6 在內的全部主流瀏覽器。

官方網址：http://layer.layui.com/

圖片在線預覽

layer.photos(options) - 相冊層

1. 引入須要的js文件

<script type="text/javascript" src="${ctxStatic}/layer/layer.js"></script>

     2. 調用layer.photos方法展現圖片

layer.photos({
    closeBtn:true,//關閉按鈕
    photos:{
    "title": "", //相冊標題
    "id": 123, //相冊id
    "start": 0, //初始顯示的圖片序號，默認0
    "data": [   //相冊包含的圖片，數組格式
        {
            "alt": "圖片名",
            "pid": 666, //圖片id
            "src": "", //原圖地址
            "thumb": "" //縮略圖地址 可省略
        },{
        }
    ]
}

});

3.效果

其餘

//彈出一個頁面層
  $('#test2').on('click', function(){
    layer.open({
      type: 1,
      area: ['600px', '360px'],
      shadeClose: true, //點擊遮罩關閉
      content: '\<\div style="padding:20px;">自定義內容\<\/div>'
    });
  });

ifame層

//彈出一個iframe層
  $('#parentIframe').on('click', function(){
    layer.open({
      type: 2,
      title: 'iframe父子操做',
      maxmin: true,
      shadeClose: true, //點擊遮罩關閉層
      area : ['800px' , '520px'],
      content: 'test/iframe.html'
    });
  });

傳值

//注意：parent 是 JS 自帶的全局對象，可用於操做父頁面
var index = parent.layer.getFrameIndex(window.name); //獲取窗口索引

//給父頁面傳值
$('#transmit').on('click', function(){
    parent.$('#parentIframe').text('我被改變了');
    parent.layer.tips('Look here', '#parentIframe', {time: 5000});
    parent.layer.close(index);//關閉窗體
});
//關閉iframe
$('#closeIframe').click(function(){
    var val = $('#name').val();
    if(val === ''){
        parent.layer.msg('請填寫標記');
        return;
    }
    parent.layer.msg('您將標記 [ ' +val + ' ] 成功傳送給了父窗口');
    parent.layer.close(index);
});