如题，快速让页面想要的按钮建立点击事件并弹窗显示一张二维码或者自定义内容的JS源码。
- CSS代码的如图效果的弹窗样式，可以根据自己的应用场景样式调整，比如颜色，窗口大小等。
- HTML代码这里是演示用的，具体的要根据自己需求设置class值即可。
- JS代码是核心部分，如果没有太多需求，直接使用，或者学习研究一下也是有帮助的。因为需求比较简单，运行后自己尝试后还是有优化空间的。视情况今后再优化吧！
当然也可以用其他第三方插件实现，看起来会没那么复杂，比如jquery；这里就不再介绍了。
效果图
原生JS简单二维码弹窗
CSS代码
<style type="text/css">
#mask{
background-color: black;
opacity: 0.3;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
}
#layer_box{
width: auto;
height: auto;
background-color: #fff;
position: absolute;
z-index: 888;
left: 200px;
top: 250px;
text-align: center;
padding: 4px;
border-radius: 4px;
}
#close{
width: 50px;
height: 50px;
background: url(close.png) no-repeat top right;
background-size: 30px 30px;
-moz-background-size: 30px 30px;
position: absolute;
top: 5px;
right: 5px;
z-index: 999;
}
#close:hover{
cursor: pointer;
}
</style>
HTML代码
<div class="nav">
<ul class="clearfix">
<li class="link">首页</li>
<li class="link">课程中心</li>
<li class="link">精品课</li>
<li class="link">新手测试</li>
<li class="link">线下交流 </li>
<li class="link">关于我们 </li>
<li class="link">个人中心</li>
</ul>
</div>
JS代码
<script>
// 实现多个元素同时绑定相同事件
var link = document.getElementsByClassName("link");
for (var i = 0; i < link.length; i++) {
link[i].onclick = function () {
show(this);
}
}
function show(curDiv){
// 获取整个页面的宽和高
var page_width = document.documentElement.scrollWidth;
var page_height = document.documentElement.scrollHeight;
// 获取浏览器的宽和高
var b_width = document.documentElement.clientWidth;
var b_height = document.documentElement.clientHeight;
// var e = event || window.event;
// event兼容火狐
var evt = window.event || arguments.callee.caller.arguments[0];
var div_height = curDiv.offsetTop;
var div2_height = evt.clientY;
// 创建一个叫mask的div,id是#mask;
var mask = document.createElement("div");
mask.id = "mask";
// mask的宽和高
mask.style.width = page_width +"px";
mask.style.height = page_height +"px";
// 在body里添加一个mask的子元素;
document.body.appendChild(mask);
// 创建一个叫kuang的div,id是#kuang;
var layer_box= document.createElement("div");
layer_box.id ="layer_box";
// layer_box在浏览器水平和垂直居中
layer_box.style.left = (b_width - 400) / 2 +"px";
layer_box.style.top =( div_height - div2_height + 200) +"px";
// 在layer_box里放一个div,id=close
layer_box.innerHTML ='<div id ="close"></div>';
// 在body里添加一个kuang的子元素;
var ku =document.body.appendChild(layer_box);
ku.innerHTML+='<img src="qrcode.jpg">';
// close做一个点击事件,关闭mask 和 layer_box
document.getElementById("close").onclick =function(){
document.body.removeChild(mask);
document.body.removeChild(layer_box);
}
// mask做一个点击事件,关闭mask 和 layer_box
document.getElementById("mask").onclick =function(){
document.body.removeChild(mask);
document.body.removeChild(layer_box);
}
}
// 浏览器窗口发生变化时
window.onresize = function(){
var layer_box= document.getElementById("layer_box");
var mask = document.getElementById("mask");
var b_width = document.documentElement.clientWidth;
var b_height = document.documentElement.clientHeight;
var page_width = document.documentElement.scrollWidth;
var page_height = document.documentElement.scrollHeight;
layer_box.style.left = (b_width - 400) / 2 + "px";
layer_box.style.top = kuang.offsetTop + "px";
mask.style.width = page_width +"px";
mask.style.height = page_height +"px";
}
</script>
如有不明白的或者疑问欢迎评论区涂鸦！~
