开发者社区> 问答> 正文

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自动关闭。
弹出式的登录功能是这样写的吗?有没有其他的写法,谢谢。

展开
收起
小旋风柴进 2016-03-13 09:33:27 2179 0
1 条回答
写回答
取消 提交回答
  • 华南理工大学计算机工程硕士,党员,高级中学教师、网络工程师、网络管理技师,高级软件测试工程师、CDA数据分析师、阿里大数据ACP、Google&amp;MIT App Inventor讲师、IISS服务项目经理、广东省计算机学会优秀科技工作者,广东省计算机学会大数据专委会委员等

    加载使用jquery,显示层:$("#sign_in").show(),隐藏层:$("#sign_in").hide()

    2019-07-17 19:01:46
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript异步编程 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载