layer弹出层的使用（layer弹出提示框，layer弹出一张图片，layer弹出地图框）

layer弹出层的使用：

1，layer弹出提示框

2，layer弹出一张图片

3，layer地图弹出框

1，下载jquery，layer http://layer.layui.com/（网上一搜，上官网下载就行了）

2，引入项目

3，使用

注意：

1，<script src="js/jquery.min.js"></script>要在<script src="js/layer/layer.js"></script>前面引入。

2，要用

$('#test').on('click', function() //这个不起作用

{

layer.msg('响应点击事件');

});

https://blog.csdn.net/xiao__jia__jia/article/details/79337312 为什么layer弹出层点击事件不起作用

例1

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><script src="js/jquery.min.js"></script><script src="js/layer/layer.js"></script>  <script>$(document).on('click', '#test', function() {layer.msg('响应点击事件');});</script><title></title></head><body><button id="test">小小提示层test</button>  </body>
</html>

效果如下：点击小小提示层，屏幕正中间弹出“响应点击事件”

例2

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><script src="js/jquery.min.js"></script><script src="js/layer/layer.js"></script>  <script>$(document).on('click', '#img', function() {var img = '<img src="pay.png"/>'layer.open({type: 1,//Page层类型//area: ['500px', '300px'],title: '请扫码支付',shade: 0.6 ,//遮罩透明度maxmin: true ,//允许全屏最小化anim: 1 ,//0-6的动画形式，-1不开启content: img,btn: ['yes', 'cancel'],yes: function(index, layero) {window.location.href='back_login.html';},cancel: function() {//右上角关闭回调}});});</script><title></title></head><body><a href="javascript:;" id="img">弹出图片</a></body>
</html>

效果如下：点击yes跳转到back——login页面，点击cancel会自动关闭弹窗

例3：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><script src="js/jquery.min.js"></script><script src="js/layer/layer.js"></script>  <script>//地图弹出框$(document).on('click', '#linkAdr', function() {layer.open({type: 2,title: '',fix: false,maxmin: true,shadeClose: true,area: ['1100px', '600px'],content: 'http://map.baidu.com/',});});        </script><title></title></head><body><a href="javascript:;" id="linkAdr">查看地图</a></body>
</html>

效果如下：点击查看地图，弹出地图

https://blog.csdn.net/qq_41815146/article/details/81141088 layer弹出图片的问题

https://blog.csdn.net/wangweiscsdn/article/details/59116942 layer.js的弹出层点击确认跳转页面