layui 之弹出窗口图片

Posted tyler-bog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui 之弹出窗口图片相关的知识,希望对你有一定的参考价值。

layer 独立版 快速上手 之 弹出图片框

首先需要导入包,下载地址:下载

其他教程:教程

导入包

  <script src="jQuery的路径"></script> <!-- 你必须先引入jQuery1.8或以上版本 -->
  <script src="layer.js的路径"></script>

上代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layer 独立版 快速上手 之 弹出图片框</title>
</head>
<body>
<!--我这里演示就使用在线版的-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="下载layer.js的路径"></script>
sss
<!--定义一个a标签,调用函数-->
<a  id="weixin" href="#" onclick="weixin()">点击打开弹窗</a>
<!--定义一个需要打开的图片 img标签-->
<div id="tong" style="display: none;">
<img src="https://i.loli.net/2019/06/01/5cf29027ea78726804.png"  style="width: 200px;height: auto">
</div>
</body>
<script>
    function weixin() 
    layer.open(
      type: 1,
      title: false,
      closeBtn: 0,
      area: '200px',
      skin: 'layui-layer-nobg', //没有背景色
      shadeClose: true,
      content: $('#tong')
);

</script>
</html>

以上是关于layui 之弹出窗口图片的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序动画之弹出菜单

WPF之弹出另外一个窗体

前端开发之弹出框系列教程一:Alert提示框

前端开发之弹出框系列教程三:Msg消息框

前端开发之弹出框系列教程二:Confirm确认框

Android之弹出菜单框注冊上下文菜单