layer彈窗使用

代碼&資源文件

layer彈窗使用.rar

一、文件目錄

popup.html

二、引入資源文件

<script type="text/javascript" src="./src/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./layer/layer.js"></script>

三、新頁面作彈窗內容

<a class="operation-btn add-btn" href="javascript:void(0)">Add</a>
    <script type="text/javascript">
        $(function(){
            $('.add-btn').click(function () {
                layer.open({
                    type: 2,
                    title: false,
                    area: ['200px', '250px'],
                    shade: [0],
                    content: ['popup.html']
                });
            });
        });
    </script>

效果：

四、隱藏div作彈窗內容

<a class="operation-btn add-btn" href="javascript:void(0)">Add</a>
<div id="m-div" style="display: none;">
    <span>xxxxxx1</span><br>
    <span>xxxxxx2</span><br>
    <span>xxxxxx3</span><br>
</div>

<script type="text/javascript">
$(function(){
    $('.add-btn').click(function () {
        layer.open({
        type: 1,
        title: false,
        area: ['300px', '350px'],
        shade: [0],
        content: $('#m-div')
        });
    });
});
</script>

效果：