2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Sun, 12 Feb 2017 03:36:45 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
\t <style>
\t
form {
max-width: 500px;
margin: 10px auto;
padding: 10px 10px;
background: #fff;
color: #071b51;
border: 1px #071b51;
border-radius: 8px;
}
\t
.loginpopup:hover {
background-color: #071b51;
color: #fff;
\t }
/*hover on span*/
.popuptext:hover {
pointer-events: auto;
}
.show {
visibility: visible;
}
.loginpopup {
position: relative;
display: inline-block;
cursor:pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
\t padding: 19px 39px 18px 39px;
background-color: #071b51;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 10px;
border: 1px solid #072583;
border-width: 1px 1px 3px;
border-color: #fff;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
color:#fff;
}
.popuptext {
visibility:hidden;
\t width: 400px;
background-color: #fff;
color: #071b51;
text-align: center;
border-radius: 6px;
padding: 10px 10px;
position: absolute;
z-index: 1;
bottom: -1000%;
left: 0%;
margin-left: -500px;
}
\t </style>
\t
</head>
<body>
<div id="loginbutton" class="loginpopup" onclick="openPopup(); "style="font-family: sans-serif; width: 150px; left: 310px; height: 60px; top: 0px;">Login</div>
\t <span id="myPopup" class="popuptext" style="border: solid 10px #071b51;">
\t
\t \t <form>
\t \t \t \t <h1>Login</h1>
\t \t \t \t \t \t <fieldset>
<label for="mail">Email:</label>
<input type="email" id="mail" name="user_email" style="border:solid 1px #071b51; border-radius: 5px;">
<label for="password">Password:</label>
<input type="password" id="password" name="user_password" style="border:solid 1px #071b51; border-radius: 5px;">
</fieldset>
<button type="submit">Login</button>
\t \t \t </form>
\t </span>
<!--JS for all actions on main page-->
<script> \t
//open myPopup \t
\t function openPopup() {
\t \t \t var popup1 = document.getElementById("myPopup");
\t \t popup1.classList.toggle("show");
\t }
\t
\t </script> \t
</body>
</html>Kann mir jemand das Problem mit diesem helfen, herauszufinden? Anfangs wird das Sichtbarkeitsattribut von "myPopup" auf "versteckt" gesetzt. Später, wenn "loginbutton" angeklickt wird (onclick()), wird die Funktion "openPopup()" aufgerufen, die setzt, dass das Sichtbarkeitsattribut von "myPopup" über die Klasse "show" auf "visible" gesetzt wird. "MyPopup" bleibt jedoch verborgen. Gibt es etwas, das ich übersehen habe? Danke
