
IE not displaying jquery lightbox
Hi everyone,
I've just downloaded PIE and created a new folder in my server. I've read the documentation and implented the PIE code inside my CSS, however, it still doesn't help with the problem.
The problem is that the lightbox opens for about a second and then closes. The screen is then masked. This doesn't happen with any other browser. I've inserted the code below. Can anyone help?
Code:
<style>
#mask {
display: none;
background:#CCCCCC;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%; height: 100%;
opacity: 0.8;
z-index: 999;
}
.login-popup{
display:none;
background:url(_images/lightBoxTwo.gif);
float:left;
font-size:12px;
position: fixed;
top: 60%; left: 55%;
z-index: 99999;
box-shadow: 0px 0px 20px #999; /* CSS3 */
-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
border-radius:3px 3px 3px 3px;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
behavior: url(_scripts/_pie/PIE.htc);
width:500px;
height:300px;
}
</style>
<script>
$(document).ready(function() {
$('a.login-window').click(function(event) {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 240) / 2;
var popMargLeft = ($(loginBox).width() + 240) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
//event.preventDefault ? event.preventDefault() : event.returnValue = false;
return false;
});
});
</script>
<html>
<a href="#login-box" class="login-window">Click here</a>
</html>