问题描述

JavaScript做了个弹出层的form ，请问如何关闭form

 <div class="form-control" id="sign_in" style="display:none">
        <input type="text" class="form-control" placeholder="Username">
        <input type="text" class="form-control" placeholder="password">
        <input type="button" class="btn btn-primary" value="sign in">
        <input type="button" class="btn btn-success" value="cancle">
 </div>
 <script>
            function signIn() {
                addBg();
                var alert_sign_in = document.getElementById("sign_in");
                alert_sign_in.style.display = "block";
                alert_sign_in.style.position = "absolute";
                alert_sign_in.style.top = "50%";
                alert_sign_in.style.left = "50%";
                alert_sign_in.style.marginTop = "-75px";
                alert_sign_in.style.marginLeft = "-150px";
                alert_sign_in.style.width = "500px";
                alert_sign_in.style.height = "700px";
                alert_sign_in.style.zIndex = "501";

              var mybg = document.createElement("div");
              mybg.setAttribute("id","mybg");
              mybg.style.background = "#000";
              mybg.style.width = "100%";
              mybg.style.height = "100%";
              mybg.style.position = "absolute";
              mybg.style.top = "0";
              mybg.style.left = "0";
              mybg.style.zIndex = "500";
              mybg.style.opacity = "0.3";
              mybg.style.filter = "alpha(opacity=30)";
              document.body.appendChild(mybg);

              document.body.style.overflow = "hidden";
            }
        </script>

这个是一个弹出式的登录功能，先有个遮罩层，然后弹出一个form供用户输入信息，请问这个这个form如何关闭？就是用户取消登录的时候，遮罩层自动取消，然后form自动关闭。

弹出式的登录功能是这样写的吗？有没有其他的写法，谢谢。

解决方案

用JQUERY把form和遮罩层的div隐藏即可，或者移除

隐藏代码
$("form的ID").hide();
$("div的ID").hide();

移除代码
$("form的ID").remove();
$("div的ID").remove();

解决方案二：

用jquery把遮罩层和弹出层的form隐藏掉,可以在弹出层的form上面监听一个点击事件.点击事件代码如下:

$(document).ready(function(){
   $("#formclose").click(function(){
                        $("#弹出层的遮罩ID").hide();
                        $("#弹出层的ID").hide();

     })

})

这样即可关闭。

解决方案三：

就是将遮罩层和弹出层隐藏即可。

解决方案四：

隐藏弹层的div就可以了。