-2

我正在建立一个网站，用户应该在查看网站内容之前登录。我尝试使用覆盖登录表单来执行此操作，但问题是我不知道如何在用户按下提交后关闭覆盖。我想我需要一个 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>
4

1 回答 1

0

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

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

在里面：

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

一般来说，如果您想保护您的内容，最好

  • 登录成功后隐藏覆盖（等等某种成功的ajax回调）
  • 不要使用 JS/HTML 来隐藏您的内容，因为它很容易被精通技术的用户找到
于 2013-05-10T12:01:45.473 回答