layer弹窗使用

最新推荐文章于 2025-04-09 09:27:00 发布

anhaogou8771

最新推荐文章于 2025-04-09 09:27:00 发布

阅读量330

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mg007/p/11193987.html

版权

官网：http://layer.layui.com/

代码&资源文件

layer弹窗使用.rar

1、文件目录

popup.html

2、引入资源文件

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

3、新页面做弹窗内容

<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>

效果：

4、隐藏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>

效果：