Showing and hiding divs in IE8 and IE9

Question

I can't seem to get two divs to appear on click in IE8 and IE9.

<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>    

Here's the jQuery code:

<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>

and the CSS code

#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
);
}

The CSS for the other overlayWrapper is identical.

Answer 1

If you're going to use anchors as your buttons, you should prevent default behavior each time:

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');
    });
});

This way you can remove the href="javascript:void(0)" from your anchors and replace them with the actual ids of the elements they're targeting: href="#overlayWrapper1" .