点击A标签文字图标弹出二维码图片带关闭功能的JS代码

文章类型:技术笔记    发表2021-07-07   文章编辑:怒熊网 · 一站式互联网+技术服务商!   阅读:157


//点击A标签文字图标弹出二维码图片带关闭功能的JS代码
       <div class="list">
            <a class="tag" onclick="openNewDiv(1)"> <img src="/skin/static/images/4db.png" alt="" /> <p>在线咨询</p> </a>
            <div id="newDiv"><img src="/skin/static/images/m-ewm.jpg" alt="" /> </div>
        </div>
<script>
        var docEle = function() {
        return document.getElementById(arguments[0]) || false;
        }
        function openNewDiv(_id) {
        var m = "mask";
        if (docEle(_id)) document.removeChild(docEle(_id));
        if (docEle(m)) document.removeChild(docEle(m));

        // mask图层
        var newMask = document.createElement("div");
        newMask.id = m;
        newMask.style.position = "absolute";
        newMask.style.zIndex = "1";
        newMask.style.width = document.body.scrollWidth + "px";
        newMask.style.height = document.body.scrollHeight + "px";
        newMask.style.top = "0px";
        newMask.style.left = "0px";
        newMask.style.background = "#000";
        newMask.style.filter = "alpha(opacity=60)";
        newMask.style.opacity = "0.60";
        document.body.appendChild(newMask);
        
        // 新激活图层
        var newDiv = document.createElement("div");
        newDiv.id = _id;
        newDiv.style.position = "fixed";
        newDiv.style.zIndex = "9999";
        newDiv.style.width = "100px";
        newDiv.style.height = "100px";
        newDiv.style.top = "40%";
        newDiv.style.left = (parseInt(document.body.scrollWidth) - 100) / 2 + "px"; // 屏幕居中
        newDiv.style.border = "1px solid #ffffff";
        newDiv.innerHTML = "";
        document.body.appendChild(newDiv);
          
        // 新增图片层
        var newImg = document.createElement("img");
        newImg.src = '/skin/static/images/m-ewm.jpg';
        newImg.style.position = "fixed";
        newImg.style.width = "100px";
        newImg.style.height = "100px";
        newImg.style.zIndex = "10000";
        newImg.style.top = "40%";
        newImg.style.left = (parseInt(document.body.scrollWidth) - 100) / 2 + "px"; // 屏幕居中
        newImg.style.border = "1px solid #ffffff";
        newDiv.appendChild(newImg);
          
        // 关闭mask和新图层
        var newA = document.createElement("a");
        newA.href = "#";
        newA.style.color = "#ffffff";
        newA.style.float = "right";
        newA.style.marginRight = "-30px";
        newA.style.marginTop = "80px";
        newA.innerHTML = "关闭";
        newA.onclick = function() {
        document.body.removeChild(docEle(_id));
        document.body.removeChild(docEle(m));
        return false;
        }
        newDiv.appendChild(newA);     
        }
</script>
//代码由怒熊网测试成功运行。
如没特殊注明,文章均为怒熊网原创,转载请注明来自:怒熊网https://www.nuxiong.com/news_show_6518.html