Showing and hiding div in IE8 and IE9

Question

It seems I can not open two divs when clicked in IE8 and IE9. Any i

<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 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 intend to use anchors as your buttons, you must prevent the 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');
    });
});

Thus you can remove href="javascript:void(0)"from your anchors and replace them with the actual idselements on which they focus: href="#overlayWrapper1".