基于layer插件的小实例：弹框图片

最新推荐文章于 2024-08-15 11:02:18 发布

超超_1号

最新推荐文章于 2024-08-15 11:02:18 发布

阅读量3.7k

点赞数 1

分类专栏：前端文章标签： layer 图片弹框

本文链接：https://blog.csdn.net/qq_42751377/article/details/81161974

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

layer插件是前端中的一个功能非常强大的插件，它的弹框功能非常实用，是前端设计与学习必不可少的一环。

准备工作：下载layer （官网：http://layer.layui.com/）

一：图片弹窗（先上正题再闲扯）

1.创建demo项目，将插件放置目录下(html文件与imgs、js文件夹同级）

2.demo_layer.html（两部分js代码可以相互注释查看效果哦）

 <!DOCTYPE html>
  
<html>
  <head>
    <title>弹框图片</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <a href="javascript:;" class='show' >查看</a>
    
  </body>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="plugin/layer/layer.js"></script>
<script type="text/javascript">

    $(function(){
      $('.show').on('click',function(){
        var img = "<img src='./imgs/1.jpg' />";
        layer.open({
          type:1,
          shift: 2,
          shade:0,
          title:'查看图片',
          shadeClose:true,
          content:img
        });
      });
    });


    <!-- $(function(){
       $('.show').on('click',function(){
           layer.open({
             type: 1 //Page层类型
             ,area: ['500px', '300px']
             ,title: '你好，layer。'
             ,shade: 0.6 //遮罩透明度
             ,maxmin: true //允许全屏最小化
             ,anim: 1 //0-6的动画形式，-1不开启
             ,content: '<div style="padding:50px;color:red;">这是一个非常普通的页面层，传入了自定义的html</div>'
           }); 
       });
     }); -->
  </script>
</html>

3.测试（点击查看后会弹出图片）