• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • paul wheaton
  • Ron McLeod
  • Devaka Cooray
Sheriffs:
  • Jeanne Boyarsky
  • Liutauras Vilda
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Carey Brown
  • Piet Souris
Bartenders:

Prevent URL change for a popup window

 
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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?
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
You need to show some code
 
Jana Jago
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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!

 
author & internet detective
Posts: 42134
937
Eclipse IDE VI Editor Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Jana Jago
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
This is a pure html/css popup window. I am only using jquery for sending data to the server.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
And where is the code where you tied to do the prevent default?
 
Jana Jago
Greenhorn
Posts: 4
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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({ ....
 
reply
    Bookmark Topic Watch Topic
  • New Topic