Here is the html for the login popup window:
<a href="#login_form" id="login_pop">Login</a>
<a href="#x" class="overlay" id="login_form"></a>
<div class="popup">
<form>
<h2>User-Login</h2>
<div>
<input type="text" id="user" value="" placeholder="Username" />
</div>
<div>
<input type="password" id="password" value="" placeholder="Password" />
</div>
<input type="checkbox" name="remember" id="remember" />
<label for="remember">Remember me</label>
<input id="login" type="button" value="Login" />
<a class="close" href="#close"></a>
</form>
</div>
CSS:
.popup {
background-color: #261e1b;
border: 3px solid #fff;
display: inline-block;
left: 77%;
opacity: 0;
padding: 15px;
position: fixed;
margin: 1em 0 0 0;
text-align: justify;
top: 40%;
visibility: hidden;
z-index: 10;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: opacity .5s, top .5s;
-moz-transition: opacity .5s, top .5s;
-ms-transition: opacity .5s, top .5s;
-o-transition: opacity .5s, top .5s;
transition: opacity .5s, top .5s;
}
.popup p, .popup div {
margin-bottom: 10px;
}
.popup h2 {
margin: 0px 0 10px 0;
}
.popup input[type="text"], .popup input[type="password"] {
border: 1px solid;
border-color: #999 #ccc #ccc;
margin: 0;
padding: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.popup input[type="text"]:hover, .popup input[type="password"]:hover {
border-color: #555 #888 #888;
}
.popup input[type="button"] {
cursor: pointer;
}
.close {
background-color: rgba(0, 0, 0, 0.8);
height: 30px;
line-height: 30px;
position: absolute;
right: 0;
text-align: center;
text-decoration: none;
top: -15px;
width: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
font-size: 24px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
background-color: rgba(64, 128, 128, 0.8);
}
In the jQuery-File i am making an ajax post to the application. The data (username and password) are being sent in json format. But this has nothing to do with my problem, which happens earlier. The "#login_form" is being added to the
https://www.mypage.com/ and i want to somehow prevent this. Is there some possibility to do this with jQuery?
Thank you!