Internet Explorer 7弹出模式未打开

Internet Explorer 7 popup modal not opening

本文关键字：模式 Explorer Internet      更新时间：2023-09-26

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

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

我想做什么，当点击气球有弹出窗口打开少量的数据在它。但当点击元数据时，另一个弹出模式应该打开。它在除IE7和IE8以外的其他浏览器中运行良好。

我可以尝试什么?

。

按下气球时在Modal中显示的元数据按钮

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

最后是Modal To Show when button被按下。下面是Modal 

<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上工作?

您正在尝试使用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;

不幸的是，IE版本小于9的没有这样的行为，因为: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
})
相关文章：