Prevent URL change for a popup window

[Jana Jago]

Hi, after searching the internet for about 4 days and not finding anything useful, here I am, hoping you can help me.
I have a html/css popup login window. It works fine, but i don't want "#login_form" to be added to the url after opening the popup. The base-href is in https. I already tried "preventDefault()", but then the popup won't open at all.
Is there a way to make it?

[Eric Pascarello]

You need to show some code

[Jana Jago]

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!

[Jeanne Boyarsky]

Why do you have #login_form in the URL? If you are using JavaScript for the popup, I don't see a reason to have this URL in here.
<a id="login_pop" rel="nofollow">Login</a>

[Jana Jago]

This is a pure html/css popup window. I am only using jquery for sending data to the server.

[Eric Pascarello]

And where is the code where you tied to do the prevent default?

[Jana Jago]

oh sorry! after it failed, I just deleted it...
It was like this:

jQuery-File:

$('input#login').click(function(e) {
e.preventDefault();
var ajaxUrl = 'https://www.mypage.com';
var data = {
'username': $('#user').val(),
'password': $('#password').val()
};

$.ajax({ ....