Question

我正在尝试2天，但我不知道如何解决这个问题。

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

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

我想做什么。单击气球时会弹出一个弹出窗口，其中包含少量数据。但是当在弹出窗口中点击MetaData时，应该打开另一个弹出模式。除IE7和IE8外，它在其他浏览器中工作正常。

怎么做??

= - == - == - =

E-克

按下气球时在模态中显示MetaData按钮

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

然后，您需要使用.target代替:target

来引用css中的目标类

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

$('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
})

Internet Explorer 7 Popup模式未打开

1 个答案: