Internet Explorer 7 popup modal not opening

Question

On Firefox and Chrome it's working fine, plus on latest IE it also works, but on IE7 and IE8 popup doesn't open.

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

What I am trying to do, when clicked on balloon there is popup opens with small amount of data in it. But when clicked on MetaData in that popup another popup modal should open. It works fine in other browsers, except for IE7 and IE8.

What can I try?

eg

MetaData button showing in Modal when balloon is pressed

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

script goes below

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

and finally the Modal To Show up when button is pressed. Below is the 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>

Why is it not working on IE7/8?

Answer 1

You are trying to reveal the popup layer using the CSS3 pseudo selector :target

Your css:

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

This is (basically) how it works:

• Your overlay divs each have an id attribute eg <div id="CB00070" class="overlay light">...</div>

• When a link with an href that refers to that id ( <a href="#CB00070">...</a> ) is clicked, that div becomes the target of the click.

• The target div will inherit any :target styling that has been specified for it, in this case visibility:visible; opacity:1; visibility:visible; opacity:1;

Unfortunately IE versions less than 9 do not behave in this way as the :target selector was introduced in a later version of CSS ( http://caniuse.com/#feat=css-sel3 )

If you really do need to support older IE versions you could try revealing the relevant <div> by adding a class that will reveal it and removing the class to hide it again, something like:

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

You will also need to remove the class when the cancel link is clicked

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

Then you will need to reference the target class in your css, using .target instead of :target

You might also want to look into some way of not having to list each of those meta-data links:

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