转载：https://blog.csdn.net/qq_41815146/article/details/81141088

layer下载地址：http://layer.layui.com/

jQuery下载地址：http://www.jq22.com/jquery-info122

使用layer弹框的步骤：

1.引入javascript文件(jQuery文件+layer.js,先引入iQuery文件，注意引入路径)

2.参考官网上的demo来编写javascript代码

以下是我做测试的demo, 文件位置如下

下面先测试引入路径的问题，测试layer.alert()

    <!DOCTYPE html>

    <html>

    <head>

    <title>弹框</title>

    <meta charset="UTF-8">

    </head>

    <body>

    <a href="javascript:;" class='show' >查看</a>

    </body>

    <script type="text/javascript" src="jquery-3.2.1/jquery-3.2.1.js"></script>

    <script type="text/javascript" src="layer/layer.js"></script>

    <script type="text/javascript">

    layer.alert('Hello world');

    </script>

    </html>

路径正确的话，此时的效果应为

下面来介绍layer的弹框种类

至于你要选择哪种弹框类型，在官网上可以查看以下，然后根据自己的需要来选择

我主要想介绍的是弹出图片的问题，暂时选择iframe层来使用

点击iframe层，会出现对应的javascript代码

     

你可以直接将对应的代码放入javascript进行测试，将content改为 http://layer.layui.com/ ，注意加 引号，否则反斜线会被转义

想特别说明的是，type值为2才能显示在线的内容，包括在线图片

测试在线图片，你可以找一个动图，复制图片路径，放入content

content: 'http://img.zcool.cn/community/012d6b573bc18d6ac7253f9adca1fd.gif'

现在问题来了，如果你想显示你本地的图片，切记要将type值改为1,找来一张图片放入目录

代码如下：

    <script type="text/javascript">

    // layer.alert('Hello world');

    $(function(){

    $('.show').on('click',function(){

    var img = '<img src="t01e625b2921d39de4b.png">'

    layer.open({

    type: 2,//Page层类型

    area: ['500px', '300px'],

    title: '你好，layer。',

    shade: 0.6 ,//遮罩透明度

    maxmin: true ,//允许全屏最小化

    anim: 1 ,//0-6的动画形式，-1不开启

    content: img

    });

    });

    });

    </script>

如果type值为2，则会出现以下错误

将type改为1，本地图片就能正常显示了

    <script type="text/javascript">

    // layer.alert('Hello world');

    $(function(){

    $('.show').on('click',function(){

    var img = '<img src="t01e625b2921d39de4b.png">'

    layer.open({

    type: 1,//Page层类型

    // area: ['500px', '300px'],

    title: '你好，layer。',

    shade: 0.6 ,//遮罩透明度

    maxmin: true ,//允许全屏最小化

    anim: 1 ,//0-6的动画形式，-1不开启

    content: img

    });

    });

    });

    </script>

而且将area这一属性去掉，弹框会匹配图片的大小

当然，我这只是用于谈这一问题做的一个小测试，而如果你是做项目的话，还可以动态显示图片，给图片的地址一个data属性

在javascript中获取到

将img给到content即可，但一定要确保图片的路径正确，才能正常显示

--------------------- 本文来自 玥娃娃 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/qq_41815146/article/details/81141088?utm_source=copy

layer弹出图片的问题的更多相关文章

  1. layer iframe层弹出图片

    这个js是在一个layer iframe弹出层中,点击按钮弹出图片

  2. layer弹出层不居中解决方案，仅显示遮罩，没有弹窗

    问题:项目中layer询问层的弹窗仅显示遮罩层,并不显示弹窗…… 原因:图片太多将layer弹窗挤出屏幕下方,看不见了…… 解决方案:让layer的弹出层居中显示 一.问题描述 用layer做操作结果 ...

  3. layer弹出信息框API

    首先向大家推荐layer,在这里也非常感谢贤心的贡献,非常不错的信息框及弹出层解决方案,为一些项目的前端开发提高了很大的效率,希望layer 越办越好! 下面是API,呵呵,官方抄袭过来的,为了自己看 ...

  4. JS 点击弹出图片/ 仿QQ商城点击左右滚动幻灯片/ 相册模块，点击弹出图片，并左右滚动幻灯片

    1, 点击弹出图片 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  5. layer弹出层不居中解决方案

    layer弹出层不居中解决方案 代码头中加入以下代码即可 <!doctype html>

  6. layer弹出层不居中解决方案，layer提示不屏幕居中解决方法，layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  7. layer弹出层

    最近因为项目要求做了一个layer弹出层demo,先看效果图 好了,现在开始上代码 index.jsp <%@ page language="java" import=&qu ...

  8. layer弹出层详解

    前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并 ...

  9. Layer弹出层销毁问题

    Layer弹出层销毁问题 最近开发时有个问题记录一下 点击按钮显示相应的图表信息,当时自己点感觉没问题,谁知到测试手里多次点击就会有后续打开的窗口无法渲染问题,看了半天才发现是调用layer.clos ...

随机推荐

  1. 【bzoj2120】数颜色 带修莫队

    数颜色 题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画 ...

  2. Python-流程控制 if判断

    目录 if 判断 语法 单分支结构 双分支结构 多分支结构 for循环 语法 for + break for + continue for + else range函数 for + if 练习 if ...

  3. Web交互增强

    刚刚google了一下这个概念,在其他的领域已经存在了这个概念,但是web方面还是没有被人提及的,所以我在这里第一次声明web方面的交互增强 交互增强 (interaction enhance) 相对 ...

  4. Delphi 设计模式：《HeadFirst设计模式》Delphi7代码---观察者模式之WeatherReport[转]

      1   2{<HeadFirst设计模式>之观察者模式 }   3{ 主题与观察者                    }   4{ 编译工具 :Delphi7.0          ...

  5. Echarts在Vue中的使用

    1.使用 cnpm 或 npm 安装 Echarts cnpm方式 cnpm install echarts -S 或者 npm方式 npm install echarts --save 2.在项目文 ...

  6. debian下编译安装poco

    系统环境: debian版本:Linux localhost.localdomain 3.10.0-862.14.4.el7.x86_64 #1 SMP Wed Sep 26 15:12:11 UTC ...

  7. LINUX设置SUID，SGID，Stick bit

    前面介绍过SUID与SGID的功能,那么,如何打开文件使其成为具有SUID与SGID的权限呢?这就需要使用数字更改权限了.现在应该知道,使用数字 更改权限的方式为“3个数字”的组合,那么,如果在这3个 ...

  8. 通过游戏学python 3.6 第一季 第四章 实例项目 猜数字游戏--核心代码--猜测次数--随机函数和屏蔽错误代码--优化代码及注释 可复制直接使用 娱乐 可封装 函数

    #猜数字--核心代码--猜测次数--随机函数和屏蔽错误代码---优化代码及注释 #!usr/bin/env python #-*-coding:utf-8-*- #QQ124111294 import ...

  9. 通过http路径获取文本内容（Java）

    public static String readFileByUrl(String urlStr) { String res = null; try { URL url = new URL(urlSt ...

  10. 关于neo4j的嵌入式和驱动包模式该如何选择，还请解惑

    看了网上的一些资料和Neo4j权威指南这本书.与图遍历相关的介绍都是基于嵌入式模式下的java Api.但是个人觉得在实际的项目中,嵌入式的模式,代码必须放在数据库所在服务器上,且服务器的启停操作都在 ...