簡體   English   中英

Internet Explorer 7 彈出模式未打開

[英]Internet Explorer 7 popup modal not opening

在 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 上運行?

您正在嘗試使用 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
}) 

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM