layer介紹與使用

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

layer是一款近年來備受青睐的web彈層組。

獲得 layer 檔案包後，解壓并将 layer 整個檔案夾（不要拆分結構） 存放到你項目的任意目錄，使用時，隻需引入 layer.js 即可。

<link rel="stylesheet" href="${ctx}/static/src/lib/layui/css/layui.css">
<script src="${ctx}/static/src/lib/layui/layui.all.js"></script>
           

在js中為對應的元素綁定點選事件，在方法中實作彈框。以下是一些例子：

彈出一個提示層

$('#test1').on('click', function(){
    layer.msg('hello');
});
           

彈出一個頁面層

$('#test2').on('click', function(){
    layer.open({
        type: ,
        area: ['600px', '360px'],
        shadeClose: true, //點選遮罩關閉
        content: '\<\div style="padding:20px;">自定義内容\<\/div>'
    });
});
           

iframe層-多媒體

<div class="Guidelines-OptionsVideo-list-video" onclick="loadVideo(this)">
    <input type="hidden" value="${message.fileurl}" />
    <video controls="controls" class="video" id="video">
        <source src="${message.fileurl}" type="video/mp4" />
    </video>
    <div class="Guidelines-OptionsVideo-list-output output" id="output"></div>
    <em></em>
</div>
function loadVideo(vid) {
    var url = $(vid).children("input").val();
    layer.open({
        type: 2,
        title: false,
        area: ['px', 'px'],
        shade: ,
        closeBtn: ,
        shadeClose: true,
        content: url
        // content: '//player.youku.com/embed/XMjY3MzgzODg0'
    });
}