js如何实现关闭js弹出层的窗口

Posted 2023-04-25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js如何实现关闭js弹出层的窗口相关的知识，希望对你有一定的参考价值。

用js代码如何实现关闭js生成的层窗口。
层里有包含一个关闭的按纽如下
<a href="#" onclick="return afd121546dfafd();" style="text-decoration:none; color: #585858; font-family: Arial; font-size: 11px; "><font关闭</font></a>

-------
onclick="return afd121546dfafd();" return 后为随机代码

先加载的层的js 最后加载一段js让这个层关闭
效果描述打开网页 js弹出层，最后执行一个js代码让层通过模拟点击关闭按钮让层关闭

如何写最后一个js代码
谢谢
谢谢下边的三位大哥的回答
补充点东西我想用的js执行鼠标click命令去关闭层

两种方法：去除和隐藏

//创建你的弹出层
var dvMsg = document.createElement("div");
strhtml = "<div class='####'>弹出层内容</div>"
strHtml += " <div class='####'><input type='button' value='关闭' onclick='btnclick()'></div>"
dvMsg.innerHTML = strHtml;
document.body.appendChild(dvMsg);
// 关闭按钮
btnclick = function ()
document.body.removeChild(dvMsg);

-------------------------
或者弹出层用div id标记

<div id="tanchu">弹出层内容</div>

js里
function open()
document.getElementById(tanchu).style.display=""; //显示

function close()
document.getElementById(tanchu).style.display="none"; //不显示（页面初始化的时候同样加载一遍）
参考技术A 写个函数，调用style.display的属性，设置为none就可以了参考技术B 1.获得关闭按钮BUTTON对象object
2.调用object.onclick(); 参考技术C 假设层的id是 aa
document.getElementById("aa").style.visibility ="hidden";

js点击任意区域弹出层消失，js点击弹出层之外的任意区域弹出层消失,常见弹层的封装

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            *{margin:0;padding:0;}
            .warp{overflow:hidden;}
            .div1,.div2,.div3,.div4{width:400px;height:100px;margin:20px;background:#000;color:#fff;}
            .div2,.div4{display:none;}
            .fiex{display:none;}
            .div3,.div4{background:red;float:left;margin-top:5px;margin-left:10px;overflow:hidden;}
            .div6,.div6 div{padding:10px;border:1px solid #000;}
            .div7{width:300px;height:50px;background:blueviolet;display:none;}
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <div class="warp">
            <div class="div1">div1</div>
            <div class="div2">div1显示的内容-点我消失</div>
        </div>
        <div class="warp">
            <div class="div3">div2</div>
            <div class="div4">div2显示内容显示内容显示内容-点我消失</div>
        </div>
        
        <br /><br />
        
        <div class="div6">
            div6内容内容
            <div class="uf">
                .uf 内容 可点击显示 .div7
            </div>
            
        </div>
        <div class="div7">
            换个布局展示 点击我时 不消失
        </div>
        
        <style type="text/css">
            #mb{position:fixed;background:rgba(0,0,0,.4);width:100%;height:100%;top:0;left:0;display:none;}
            .showbox{position:fixed;top:50%;left:50%;width:400px;height:200px;margin-top:-100px;margin-left:-200px;z-index:100;background:#fff;display:none;}
            .close{position:fixed;top:0;right:0;z-index:201;background:red;}
        </style>
        
        <input type="button" class="btn2" name="" id="" value="btn2" />
        <div id="mb"></div>
        <div class="showbox">
            <div class="close">closeBtn</div>
        </div>
        
        
        <script type="text/javascript">
            $(function(){
                $.fn.extend({
                    toggleWin : function(winBox,boolean){
                        //this 点击显示winBox 点击除了this的 其他地方则隐藏winBox
                        //boolean赋值 且 == true 点击除了this和winBox 的 其他地方则隐藏winBox
                        $(this).click(function(ev){
                            $(winBox).show();
                            ev.stopPropagation();
                        });
                        $(document).click(function(e){
                            $(winBox).hide();
                        });
                        if(boolean && boolean==true){
                            $(winBox).click(function(ev){
                                ev.stopPropagation();
                            });
                        }
                    },
                    toggSpecify : function(winBox,closeBar){
                        //this 被点击显示winBox
                        //closeBar被点击则关闭 winBox,默认 closeBar=#mb
                        var winBoxBg = ‘<div id=\"mb\"></div>‘
                        $(this).click(function(){
                            if(!$("#mb")){
                                $("body").append(winBoxBg);
                            }
                            $("#mb,"+winBox).show();
                        });
                        closeBar ? closeBar : closeBar="#mb";
                        $(closeBar).click(function(){
                            $("#mb,"+winBox).hide();
                        });
                    }
                    
                });
                $(".div1").toggleWin(".div2");
                $(".div3").toggleWin(".div4");
                $(".uf").toggleWin(".div7",true);
                $(".btn2").toggSpecify(".showbox",".close,#mb");
                
                
                
            })
        </script>
    </body>
</html>

以上是关于js如何实现关闭js弹出层的窗口的主要内容，如果未能解决你的问题，请参考以下文章