Popup Jquery 适用于所有浏览器，但 IE7答案

【问题标题】：Popup Jquery is working in all browsers but IE7Popup Jquery 适用于所有浏览器，但 IE7
【发布时间】：2013-05-28 21:58:16
【问题描述】：

我编写了一个脚本，单击 jquery 会将 html 加载到当前页面中。但是，这在除 IE 7 之外的所有浏览器上都可以正常工作，我非常困惑为什么会这样。按钮是页面右上角的信息和联系人按钮。

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>

这是代码被加载的地方。只有在 IE 7 中，掩码会用黑屏覆盖弹出窗口。如果有人遇到过类似的问题，我很想了解为什么这种情况只发生在 IE 7 中

谢谢

【问题讨论】：

它在 IE7 和 IE10 中提供相同的输出。对我来说很好。
:什么？右上角的按钮是吗？

标签： jquery html css internet-explorer

【解决方案1】：

IE7 有各种你必须解决的“问题”。我猜是 z-index 问题...

“在 Internet Explorer 中定位的元素会生成一个新的堆叠上下文，从 z-index 值 0 开始。因此 z-index 不能正常工作”

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

您可能需要将代码/css 更改为您的 <div id="container"> 元素，该元素也将 z-index 应用于此。类似这样的东西：

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

【讨论】：