如題，快速讓頁面想要的按鈕建立點擊事件并彈窗顯示一張二維碼或者自定義內(nèi)容的JS源碼。

• CSS代碼的如圖效果的彈窗樣式，可以根據(jù)自己的應(yīng)用場景樣式調(diào)整，比如顏色，窗口大小等。
• HTML代碼這里是演示用的，具體的要根據(jù)自己需求設(shè)置class值即可。
• JS代碼是核心部分，如果沒有太多需求，直接使用，或者學(xué)習(xí)研究一下也是有幫助的。因為需求比較簡單，運行后自己嘗試后還是有優(yōu)化空間的。視情況今后再優(yōu)化吧！
  當(dāng)然也可以用其他第三方插件實現(xiàn)，看起來會沒那么復(fù)雜，比如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">關(guān)于我們 </li>
        <li class="link">個人中心</li>
    </ul>
</div>

JS代碼

<script>
   // 實現(xiàn)多個元素同時綁定相同事件
    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;
        
        // 創(chuàng)建一個叫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);
        
        // 創(chuàng)建一個叫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做一個點擊事件,關(guān)閉mask 和 layer_box
        document.getElementById("close").onclick =function(){
            document.body.removeChild(mask);
            document.body.removeChild(layer_box);
        }
        // mask做一個點擊事件,關(guān)閉mask 和 layer_box
        document.getElementById("mask").onclick =function(){
            document.body.removeChild(mask);
            document.body.removeChild(layer_box);
        }
    }

    // 瀏覽器窗口發(fā)生變化時
    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>

如有不明白的或者疑問歡迎評論區(qū)涂鴉！~