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

在IE8和IE9中显示和隐藏div

1 个答案: