All geek questions in one place

Button to make another div visible

I am pretty new and just worried with some html / css. I planned to make the login screen in the middle when the user clicks "Login".

I set the div to be hidden on the screen and I want to make it visible when the user clicks "login"

the problem I am facing again makes the Div visible. Here is the 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 }
+5
source share
2 answers

:active only works as long as the item is clicked. Once the click is no longer held, the item will no longer be active.

Try using Javascript for this, for example:

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

Where <id-of-div> is any identifier that you have assigned the div that you want to make visible.

+2
source

You cannot capture a custom event ("click") without using javascript (or, even better, jQuery). As a newbie, I first suggest you use jQuery rather than pure javascript . First, typing is much less and (imho) much easier to learn. You code in jQuery, and behind the scenes jQuery turns this into javascript at runtime. To use jQuery, all you have to do is include the jQuery library in the <head> tags of each page, for example:

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

jQuery to display the login form will look something like this:

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

Here is an example you can use for ideas:

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" />

Since you're new to jQuery, here are some free beginner tutorials to get you started. (I found out myself, and they are free)

0
source

Source: https://habr.com/ru/post/1245391/

More articles:


All Articles