在 IE8 和 IE9 中顯示和隱藏 div

Question

我似乎無法在點擊 IE8 和 IE9 時出現兩個 div。

<div class="FormBottom grid-container">
                    <div class="Required grid-50">
                        *Verplichte velden
                    </div>
                    <div class="Privacy grid-50 grid-container">
                        <div class="PrivacyStatement grid-100">
                            <a href="javascript:void(0);" id="showPopup1">Privacy       Statement</a> - <a href="javascript:void(0);" id="showPopup2">Cookies</a>
                        </div>
                    </div>
<div id="overlayWrapper1" style="display:none;">
        <div id="overlayContent1">
            <button class="closeBtn" id="closeBtn"></button>
            <h3>
                Privacy Statement
            </h3>
            <span class="PrivacyText">
                De door u verstrekte gegevens worden uitsluitend gebruikt om u de aangeboden informatie of diensten via de Lexus vestigingen van LOUWMAN RETAIL te kunnen aanbieden. Hierbij wordt gehandeld in overeenstemming met de Nederlandse wettelijke regels voor de bescherming van persoonsgegevens.
            </span>
                
        </div>
    </div>    
    <div id="overlayWrapper2" style="display:none;">
        <div id="overlayContent2">
            <button class="closeBtn" id="closeBtn1"></button>
            <h3>
                Cookies
            </h3>
            <span class="CookiesText">
                De website www.lexusnx.nl plaatst cookies. Cookies zijn kleine tekstbestanden die door een internetpagina op een pc, tablet of mobiele telefoon worden geplaatst. Deze cookies worden gebruikt om deze website beter te laten functioneren en het webbezoek te monitoren, zodat LOUWMAN RETAIL na kan gaan hoeveel mensen de website in een bepaalde periode hebben bezocht. LOUWMAN RETAIL gebruikt deze data alleen geaggregeerd en kan deze niet herleiden tot een pc of individu. Hieronder vindt u een lijst van cookies die geplaatst worden door www.lexusnx.nl en hun functionaliteit.
            </span>
                  
        </div>
    </div>    

這是jQuery代碼：

<script>
jQuery(document).ready(function() {
    jQuery('#showPopup1').on('click', function() {
        jQuery('#overlayWrapper1').css('display', 'block');
    });
    jQuery('#showPopup2').on('click', function() {
        jQuery('#overlayWrapper2').css('display', 'block');
    });
    jQuery('#closeBtn').on('click', function() {
        jQuery(this).parent().parent().css('display', 'none');
    });
    jQuery('#closeBtn1').on('click', function() {
        jQuery(this).parent().parent().css('display', 'none');
    });
});
</script>

和CSS代碼

#overlayWrapper1{
position:absolute;
top:0;
margin:0;
margin-left:-10px;
padding: 0px;
z-index:1000;
background-image:url('/img/lexus/blk_px.png');
filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr=#00FFFFFF, endColorstr=#00FFFFFF
);
}

另一個 overlayWrapper 的 CSS 是相同的。

Answer 1

如果你打算使用錨點作為你的按鈕，你應該每次都避免默認行為：

jQuery(document).ready(function() {
    jQuery('#showPopup1').on('click', function(e) {
        jQuery('#overlayWrapper1').css('display', 'block');
        e.preventDefault();
    });
    jQuery('#showPopup2').on('click', function(e) {
        jQuery('#overlayWrapper2').css('display', 'block');
        e.preventDefault();
    });
    jQuery('#closeBtn').on('click', function() {
        jQuery(this).parent().parent().css('display', 'none');
    });
    jQuery('#closeBtn1').on('click', function() {
        jQuery(this).parent().parent().css('display', 'none');
    });
});

這樣，您可以從錨點中刪除href="javascript:void(0)"並將它們替換為它們所針對的元素的實際ids ： href="#overlayWrapper1" 。