Question

我正在构建一个网站，用户在查看网站内容之前应该登录该网站。我尝试使用重叠登录表单执行此操作，但问题是我不知道如何在用户按提交后关闭叠加层。我想我需要一个JavaScript，但我对Javascript一无所知。

有人可以帮帮我吗？谢谢！

这就是我打算做的事情：

<!DOCTYPE html> 
<html lang="en">
    <head>
        <meta charset="utf-8"> 
        <title>CSS Overlay</title> 
        <style type="text/css"> 
            html { height: 100%; min-height: 100%; } 
            body { height: 100%; min-height: 100%; font-family:Georgia, sans-serif; } 
            #overlay { background: rgba(0,0,0,0.4); width: 100%; height: 100%;min-height: 100%; position: fixed; top: 0; left: 0; z-index: 10000; 
            header, section,footer { width: 800px; margin: 0 auto 20px auto; padding: 20px; background: #ff0; }
            section { min-height: 1500px; } 
        </style> 
    </head>
    <body> 
        <div id="overlay"></div>
        <section> 
            <form> 
                <input type='hidden' name='submitted' id='submitted' value='1'/> 
                <label for='username' >UserName*:</label> 
                <input type='text' name='username' id='username' maxlength="50" /> 
                <br> 
                <label for='password' >Password*:</label> 
                <input type='password' name='password' id='password' maxlength="50" />
                <br> 
                <input type='submit' name='Submit' value='Submit' /> 
            </form> 
        </section>
    </body> 
</html>

Answer 1

您问题的直接答案是：将onclick处理程序添加到提交元素

<input type="submit" onclick="document.getElementById('overlay').style.display = 'none';" name="Submit" value="Submit" />

在里面：

选择要隐藏的元素
通过将其显示属性设置为“无”

一般情况下，如果您想保护自己的内容，最好

登录成功后隐藏叠加层（所以某种成功的ajax回调）
不使用JS / HTML来隐藏您的内容，因为很容易从技术娴熟的用户那里找到它

用户注册后如何关闭叠加层

1 个答案: