码迷,mamicode.com
首页 > 其他好文 > 详细

layer弹窗使用

时间:2019-07-16 12:51:49      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:mic   asc   tle   click   log   play   pre   tps   java   

代码&资源文件

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>

效果:

技术图片

layer弹窗使用

标签:mic   asc   tle   click   log   play   pre   tps   java   

原文地址:https://www.cnblogs.com/mg007/p/11193987.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!