javascript - Internet Explorer 7 弹出模式未打开

Question

在 Firefox 和 Chrome 上它工作正常，而且在最新的 IE 上它也可以工作，但是在 IE7 和 IE8 上弹出窗口打不开。

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

我正在尝试做的是，当单击气球时，会打开弹出窗口，其中包含少量数据。但是当在该弹出窗口中单击元数据时，应该打开另一个弹出模式。它在除 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;

不幸的是，低于 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
})