转载: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. 【hihocoder 1477】闰秒

    [题目链接]:http://hihocoder.com/problemset/problem/1477 [题意] 中文题 [题解] 首先,一年一年地加,把开始的年份和结束的年份之间的年根据是否为闰年; ...

  2. anchor-free : CornerNet 和 CenterNet 简要笔记

    CornerNethourglass network -> prediction module = corner pooling -> heatmaps + embedding + off ...

  3. vue 基本知识

    1,内置事件对象event 原生JS事件中是直接通过传入 e 或者 event 就可以获取,但在vue中要传入 $event 才可以获取到内置事件对象 <body> <button ...

  4. camtasia Studio 7 的使用

    最近领导给了个任务,要把我们的三维应用功能做个视频,好带出去宣传.通过搜索,发现大家都说camtasia Studio好用,很快在网上找到了,与大家分享链接: http://pan.baidu.com ...

  5. Html 重要单词归纳

    1.translate(x,y)平移2.scale(x,y)缩放3.fillstyle填充4.linearGradient(xstart,ystart,xend,yend)渐变5.move to 将光 ...

  6. python 日记 day4。

    1.为何数据要分类 数据是用来表示状态的,不同的状态应该用不同类型的数据来表示. 2.数据类型 数字 字符串 列表 元组 字典 集合 列表:列表相比于字符串,不仅可以储存不同的数据类型,而且可以储存大 ...

  7. tensorflow根据pb多bitch size去推导物体

    with self.detection_graph.as_default(): with tf.Session(graph=self.detection_graph) as sess: # Expan ...

  8. WebConfig配置文件

    <?xml version="1.0"?> <!--注意: 除了手动编辑此文件以外,您还可以使用 Web 管理工具来配置应用程序的设置.可以使用 Visual S ...

  9. JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...

  10. java并发系列(八)-----java异步编程

    同步计算与异步计算 从多个任务的角度来看,任务是可以串行执行的,也可以是并发执行的.从单个任务的角度来看,任务的执行方式可以是同步的,也可以是异步的. Runnable.Callable.Future ...