玩转layer弹窗弹出层

全部头部先引用

<script src="https://code.xulgr.com/js/jquery-1.8.2.min.js"></script>
<script src="https://code.xulgr.com/js/layer/layer.js" type="text/javascript"></script>

 

一、点击复制，同时弹出窗口，同时弹出提示

 应用：昨天开发雪哥窝前端，想弄一个百度网盘下载窗口，点击复制提取码同时弹出提取码已复制，同时弹出百度网盘链接窗口，就摸索了这个。

效果：

 

代码：

<div style="text-align: center;">
<a class="btn btn-primary"><span style="font-size: 18px;"><strong>提取码 <input id="xulgr" value="be53" style="width:42px;height:24px;"></strong></span></a>
<a class="btn btn-danger" onClick="copyxulgr()" href="javascript:;" id="cs1"><span style="font-size: 18px;"><strong>点击测试一</strong></span></a>
<script>
$("#cs1").on("click", function(){
layer.open({
type: 2,
title: "提取码：be53",
area: ["75%", "80%"],
shade: 0.5,
btnAlign: "c",
btn: ["单独打开","已提取，关闭窗口",],
content: "https://pan.baidu.com/s/16WUITHwhOl72RwU20JHbTA",
end: function(){},
success: function(layero){
var btn = layero.find(".layui-layer-btn");
btn.find(".layui-layer-btn0").attr({
href: "https://pan.baidu.com/s/16WUITHwhOl72RwU20JHbTA",
target: "_blank"
});
}
});
layer.msg("提取码已复制可直接粘贴");
});
</script>
</div>

 

---

 

二、点击查看公告/提示的弹窗，在弹窗底部按钮输出超链/二次弹窗

应用：昨天开发雪哥窝前端，想弄一个先提示的弹窗在点击登录弹窗。

效果：

代码：

<div style="text-align: center;">
<a class="btn btn-danger btn-lg" href="javascript:;" id="cs2">提示测试</a>
<script>
$('#cs2').on('click', function(){
layer.open({
type: 1
,title: false
,closeBtn: false
,area: '300px;'
,shade: 0.8,
,id: 'LAY_layuipro'
,btn: ['登录测试', '暂不登录']
,btnAlign: 'c'
,moveType: 1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">登录账号自动显示全部图片<br>没有账号可免费注册<br><br>不知道资源是不是自己需要的？<br>登录后解锁全部截图就知道啦！ ^_^</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({
href: 'javascript:;'
,id: 'cs2_1'
});
}
});
});
</script><script>
$('#cs2_1').on('click', function(){
layer.open({
type: 2,
title: '登录测试',
maxmin: true,
area: ['800px', '500px'],
content: 'https://xulgr.com', //这里可以是登录链接或页面
end: function(){
}
});
});
</script>
</div>