CSS3 PIE Forums
http://css3pie.com/forum/

IE not displaying jquery lightbox
http://css3pie.com/forum/viewtopic.php?f=3&t=2108
Page 1 of 1

Author:  Dredd2000 [ Mon Aug 26, 2013 6:18 am ]
Post subject:  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>


Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/