Question

我很新，只是遇到一些html / css。我计划在用户点击＆＃34;登录＆＃34;中间时弹出登录屏幕。

我已经设置了一个隐藏在屏幕上的div，我希望当用户点击＆＃34;登录＆＃34;

时可以看到它

我遇到的问题是让Div再次可见。这是CSS：

#loginscreen {
    position: absolute;
    width: 400px;
    height: 500px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 2px solid black;
    border-radius: 40px;
    background-color: lightgrey;
    visibility: hidden;
    z-index: 1000;
}

    .loginbtn:active + #loginscreen
    {
      visibility: visible

    }

Answer 1

只有在点击元素时，

:active才有效。只要不再保持点击，该元素就不再有效。

尝试使用Javascript执行此操作，例如：

<button type="button" onclick="document.getElementById('<id-of-div>').style.visibility = 'visible'"> Login </button>

<id-of-div>是您分配给div的任何ID，您希望其可见。

Answer 2

你不能在不使用javascript（或者更好的是，jQuery）的情况下捕获用户事件（“click”）。作为初学者，我首先建议你use jQuery rather than pure javascript。一方面，打字更少，而且（imho）更容易掌握。你在jQuery中编码，在幕后jQuery在运行时将其转换为javascript。要使用jQuery，您必须做的就是在每个页面的<head>标记中包含jQuery库，如下所示：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

显示登录表单的jQuery看起来像这样：

$('#mybutt').click(function(){
    $('#loginscreen').fadeIn(800);
});

以下是您可以用于创意的示例：

jsFiddle Demo

$('#mybutt').click(function(){
		$('#loginscreen').fadeIn(800);
});
$('#logX').click(function(){
		$('#loginscreen').fadeOut(800);
});

div{position:relative;box-sizing:border-box;}
#loginscreen {
    position: absolute;
    width: 400px;
    height: auto;
    top:0;
    right: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: lightgrey;
    z-index: 1000;
    display:none;
}
#logHead{width:100%;height:40px;padding:5px;background:darkcyan;color:white;overflow:hidden;}
  #headLeft{float:left;width:80%;}
  #headRight{float:right;width:20px;padding:5px;border:1px solid green;cursor:pointer;}
#logTop{width:100%;padding:20px;}
#logUN{width:100%;}
#logPW{width:100%;}
#logBott{width:100%;padding-left:80%;overflow:hidden;}
#loginscreen input{font-size:1.5rem;border:1px solid #ddd;}
button{font-size:1.5rem;color:white;background:darkcyan;cursor:pointer;}
#mybutt{position:absolute;bottom:150px;left:50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="loginscreen">
    <div id="logHead">
        <div id="headLeft">Login:</div>
        <div id="headRight"><div id="logX">X</div></div>
    </div>
    <div id="logTop">
        <div id="logUN"><input type="text" id="username" placeholder="user"/></div>
        <div id="logPW"><input type="text" id="password" placeholder="pass"/></div>
    </div>
    <div id="logBott">
        <button>Login</button>
    </div>
</div>
<input type="button" id="mybutt" value="Login" />

由于您不熟悉jQuery，here are some free beginner-level tutorials可以帮助您入门。（这是我自学的地方，而且他们是免费的）

按钮使其他div可见

2 个答案: