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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM