Internet Explorer 7 弹出模式未打开

Question

在 Firefox 和 Chrome 上运行良好，在最新的 IE 上也可以运行，但在 IE7 和 IE8 上无法打开弹出窗口。

http://webteezy.com/demos/prototype.html#

我正在尝试做的是，当单击气球时，会打开弹出窗口，其中包含少量数据。 但是，当单击该弹出窗口中的 MetaData 时，应打开另一个弹出模式。 它在除 IE7 和 IE8 之外的其他浏览器中运行良好。

我可以尝试什么？

例如

按下气球时以模态显示的元数据按钮

<p><a href=# class="butt CB00071">Data</a><a href="#CB00071" class="butt hover CB00071">MetaData</a></p>

脚本如下

    $('body').on('click','.CB00071',function(e){
    $('#CB00071').css({'display':'inline-block',
        '*display': 'inline',
        'zoom': '1'});
});

最后是按下按钮时显示的模态。 下面是模态。

<div id="CB00071" class="overlay light" style="display: none">
    <a class="cancel" href="#"></a>
    <div class="popup">
        <h2>KINGDOM OF SAUDI ARABIA</h2>
        <h3>GENERAL COMMISSION FOR SURVEY, GEODESY & LAND SURVEY</h3>
        <div class="content">

            <div class="col-1-1">
                <div class="col-1-2"><p class="info">Site Name <span>CB0007</span></p></div>
                <div class="col-1-4"><p class="info">Station Number <span>CB00071</span></p></div>
                <div class="col-1-4"><p class="info">Site Type <span>Ex-Center</span></p></div>
            </div>
            <div class="col-1-2"><p class="info">Province <span>Mekkah</span></p></div>
            <div class="col-1-2"><p class="info">Town/Location Name <span>CB0010</span></p></div>
            <div class="col-1-1">
                <div class="col-1-4"><p class="info">Latitude <span>N21°37'02.54104"</span></p></div>
                <div class="col-1-4"><p class="info">Longitude <span>E40°08'48.54207"</span></p></div>
                <div class="col-1-4"><p class="info">Height <span>614.224m</span></p></div>
                <div class="col-1-4"><p class="info">Absolute Gravity<span>978540849.6(µGal)</span></p></div>
            </div>
            <p><a href="logsheets/obs_card_cb071.pdf" class="butt hover">Download Details Log Sheet</a></p>
        </div>
    </div>
</div>

为什么它不能在 IE7/8 上运行？

Answer 1

您正在尝试使用 CSS3 伪选择器显示弹出层:target

你的CSS：

.overlay:target {
  visibility: visible;
  opacity: 1;
}

这是（基本上）它是如何工作的：

• 您的叠加divs每个都有一个 id 属性，例如<div id="CB00070" class="overlay light">...</div>

• 当单击带有引用该 id ( <a href="#CB00070">...</a> ) 的 href 的链接时，该 div 将成为单击的目标。

• 目标div将继承为其指定的任何:target样式，在本例中为visibility:visible; opacity:1; visibility:visible; opacity:1;

不幸的是，低于 9 的 IE 版本不会以这种方式运行，因为:target选择器是在更高版本的 CSS ( http://caniuse.com/#feat=css-sel3 ) 中引入的

如果您确实需要支持较旧的 IE 版本，您可以尝试通过添加一个将显示它的类并删除该类以再次隐藏它来显示相关的<div> ，例如：

$('body').on('click','.CB00070',function(e){
    // reference our target div
    var targetDiv=$('#CB00070');
    // add a class so that it can be styled using css which older browsers will recognise
    targetDiv.addClass('target');
    // make sure there is only ever one active target
    targetDiv.siblings('.target').removeClass('target'); 
    // add in the behaviour that was working previously 
    // (though these styles could be put into the stylesheet)
    targetDiv.css({'display':'inline-block',
        '*display': 'inline',
        'zoom': '1'});
});

单击取消链接时，您还需要删除该类

$('body').on('click','.cancel', function(e){
    $('div.target').removeClass('target');
})

然后你需要在你的 CSS 中引用目标类，使用.target而不是:target

您可能还想研究一些不必列出每个元数据链接的方法：

$('body').on('click','a[href ^= "#CB"]',function(e){
// this should catch all of your meta data links
// you will need to find the target div using the href 
// attribute of the link that has just been clicked
})