CODEWITHSUNDEEP
jqueryhtmlcssinternet-explorer
MaxwellLynn
MaxwellLynn

Reputation: 968

Popup Jquery is working in all browsers but IE7

I've written a script where on click the jquery loads html into a the current page. However this works fine on all browsers but IE 7, I am extremely confused why this might be. The buttons are the information and contact buttons in the top right of the page.

http://madaxedesign.co.uk/

Jquery:

 $(document).ready(function() {


// INFORMATION PAGE


$('a.info , a.info_footer').click(function() {
    $("html, body").animate({ scrollTop: 0 }, 600);
    $("#popup").load("/info.html");
    // Getting the variable's value from a link
    var 
    show = $('#popup').css('display', 'block'),
    popup = $(this).attr('href');

    //Fade in the Popup and add close button
    $(popup).fadeIn(300);

    //Set the center alignment padding + border
    var popMargTop = ($(popup).height() + 24) / 2; 
    var popMargLeft = ($(popup).width() + 24) / 2; 

    $(popup).css({ 
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
});

// When clicking on the button close or the mask layer the popup closed
$('#popup').on('click', '.cross', function() { 
  $('#mask , #popup').fadeOut(300 , function() {
    $('#mask').remove();  
}); 
return false;
});


    // CONTACT FORM PAGE


    $('a.contact , a.contact_footer, a.contact_text').click(function() {
    $("html, body").animate({ scrollTop: 0 }, 600);
    $("#popup").load("/contact.php");
    // Getting the variable's value from a link
    var 
    show = $('#popup').css('display', 'block'),
    popup = $(this).attr('href');

    //Fade in the Popup and add close button
    $(popup).fadeIn(300);

    // Add the mask to body
    $('body').append('<div id="mask"></div>');
    $('#mask').fadeIn(300);

    return false;
});
});

HTML:

<div id="popup" class="corners">
</div>

This is where the code gets loaded into. Only in IE 7 a mask covers the pop up with a black screen. If anyone has had a similar problem I would love to understand why this happens in only IE 7

Thanks

Upvotes: 0

Views: 448

Answers (1)

sirmdawg
sirmdawg

Reputation: 2579

IE7 has all kinds of "issues" that you have to work around.. my guess is the z-index issue...

“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly”

http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

You may need to alter the code / css to your <div id="container"> element that applies a z-index to this as well.. something like this:

<div id="container" style="position: relative; z-index: 2202">
  <div id="popup class="corners"></div>
</div>
<div id="mask"></div>

Upvotes: 1

Related Questions