我有一个显示登录公式的按钮(prihlsi sa),但我需要添加过渡效果(慢慢显示),我不知道在这种情况下如何操作,因为我不知道javascript。解决方案可以是javascript,我会理解的。
尝试单击“prihlÃsiÅsa”以显示公式。这就是我想做的,慢慢来。
/* RegistraionLoginForm */
.accounthave {
display: block;
text-decoration: none;
color: black;
margin-top: 8%;
}
.regsocmedbtnf {
display: block;
margin: 1% 20% 1% 20%;
width: 60%;
padding: 2%;
text-decoration: none;
color: white;
background-color: #3B5998;
border-radius: 3px;
}
.regsocmedbtng {
display: block;
margin: 1% 20% 1% 20%;
width: 60%;
padding: 2%;
text-decoration: none;
color: white;
background-color: #dd4b39;
border-radius: 2px;
}
.signupbtn {
margin: 1% 20% 1% 20%;
background-color: black;
color: white;
padding: 3%;
border: none;
cursor: pointer;
border-radius: 2px;
}
.loghead {
margin: 0 0 5% 0;
padding: 5% 0 5% 0;
text-align: center;
border-bottom: 1px solid rgb(200, 200, 200);
}
.containerreg input {
margin: 0% 20% 3% 20%;
width: 60%;
padding: 2%;
}
.containerreg input:focus {
border: 1px solid black;
}
.containerlog {
margin: 5% auto 15% auto;
width: 400px;
}
.containerlog input {
margin: 0% 20% 3% 20%;
width: 60%;
padding: 2%;
}
.containerlog input:focus {
border: 1px solid black;
}
.containerreg {
text-align: center;
display: none;
}
.containerlog {
text-align: center;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.9);
padding-top: 50px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
/* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
/* Could be more or less, depending on screen size */
height: 600px;
border-radius: 2px;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn,
.signupbtn {
width: 100%;
}
}
<div class="navlinksr">
<a href="#" class="navlinkborder">Relácie</a>
<a href="#">Webinár</a>
<a href="#">Blog</a>
<a class="navlinksline"></a>
<a href="#" onclick="document.getElementById('id01').style.display='block'">Prihlásiť sa</a>
</div>
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<!-- BEGIN - LOGFORM -->
<div class="containerlog" id="containerlog">
<form class="modal-content" action="/action_page.php">
<h1 class="loghead"> Prihlásenie </h1>
<input type="email" placeholder="Email: " required ><br>
<input type="password" placeholder="Heslo: " required><br>
<button type="submit" class="signupbtn">Prihlásiť sa sa</button>
<p>Alebo</p>
<a href="#" class="regsocmedbtng"><i class="fab fa-google" style="float: left"></i> Prihlásenie cez Google </a>
<a href="#" class="regsocmedbtnf"><i class="fab fa-facebook-f" style="float: left"></i> Prihlásenie cez Facebook </a>
<a href="#" onclick="document.getElementById('containerreg').style.display='block';document.getElementById('containerlog').style.display='none'" class="accounthave">Nemáte úÄet? <b>Registrujte sa.</b></a>
</form>
</div>
<!-- END - LOGFORM -->
<!-- BEGIN - REGFORM -->
<div class="containerreg" id="containerreg">
<form class="modal-content" action="/action_page.php">
<h1 class="loghead"> Registrácia </h1>
<input type="text" placeholder="Meno: " required><br>
<input type="text" placeholder="Priezvisko: " required><br>
<input type="email" placeholder="Email: " required><br>
<input type="password" placeholder="Heslo: " required><br>
<input type="password" placeholder="Zopakujte heslo: " required><br>
<button type="submit" class="signupbtn">Registrovať sa</button>
<p>Alebo</p>
<a href="#" class="regsocmedbtng"><i class="fab fa-google" style="float: left"></i> Registrácia cez Google </a>
<a href="#" class="regsocmedbtnf"><i class="fab fa-facebook-f" style="float: left"></i> Registrácia cez Facebook </a>
<a href="#" class="accounthave" onclick="document.getElementById('containerreg').style.display='none';document.getElementById('containerlog').style.display='block'">Máte už úÄet? <b>Prihláste sa.</b></a>
</form>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
