Home > Developer > Web Develop
Mouse Click event is when the mouse click on the element, there will be another window, similar to the top-right corner of the Baidu homepage "Login" This button, when the mouse click
The login window appears when you log in. The general meaning is this, directly on the code, easy to understand.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Login Disappears </title>
<style type= "Text/css" >
#log {
width:100px;height:30px;
Background:green;
Text-align:center;
}
#login {
margin:0;padding:0;
Display:inline-block;
Color:black;
line-height:30px;
}
. qq{
Position:absolute;
left:0;top:0;
width:100%;height:100%;
Background:black;
opacity:0.15;
Text-align:right;
}
. dian{
Text-decoration:none;
font-size:50px;
width:150px;
height:50px;
Background:white;
Display:block;
margin:100px Auto 0px;
Color:black;
}
</style>
<body>
<div id= "Log" >
<a href= "#" id= "Login" > Login </a>
</div>
<div class= "QQ" >
<a href= "#" class= "Dian" >x</a>
</div>
<script type= "Text/javascript" >
var login = document.getElementById (' login ');
var qq = Document.getelementsbyclassname (' QQ ');
var dian = document.getelementsbyclassname (' dian ');
Qq[0].style.display = ' None ';
Login.onclick = function () {
Qq[0].style.display = ' block ';
}
Dian[0].onclick = function () {
Qq[0].style.display = ' None ';
}
</script>
</body>
Start without clicking Login, refresh the page directly
When you click Sign in, the page will look like this:
When you click on the x number in the graph, the page disappears and the result is the first picture.
JS Control Mouse Click event
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
