javascript - internet explorer 7 Popup modal not opening -

i trying 2 days, not sure how fix issue.

on firefox , chrome working fine. plus on latest ie works, on ie7 , ie8 popup dont open.

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

what trying do. when clicked on baloon there popup opens small amount of data in it. when clicked on metadata in popup popup modal should open. works fine in other browswers, except ie7 , ie8.

what do??

=-==-=-=-=

e-g

metadata button showing in modal when balloon 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 modal show when button pressed. below 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 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> 

but somehow not working on ie7/8??

you trying reveal popup layer using css3 pseudo selector :target

your css:

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

this (basically) how works:

• your overlay divs each have id attribute eg <div id="cb00070" class="overlay light">...</div>

• when link href refers id (<a href="#cb00070">...</a>) clicked, div becomes target of click.

• the target div inherit :target styling has been specified it, in case visibility:visible; opacity:1;

unfortunately ie versions less 9 not behave in way :target selector introduced in later version of css (http://caniuse.com/#feat=css-sel3)

if need support older ie versions try revealing relevant <div> adding class reveal , removing class hide again, like:

$('body').on('click','.cb00070',function(e){     // reference our target div     var targetdiv=$('#cb00070');     // add class can styled using css older browsers recognise     targetdiv.addclass('target');     // make sure there ever 1 active target     targetdiv.siblings('.target').removeclass('target');      // add in behaviour working      // (though these styles put stylesheet)     targetdiv.css({'display':'inline-block',         '*display': 'inline',         'zoom': '1'}); }); 

you need remove class when cancel link clicked

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

then need reference target class in css, using .target instead of :target

you might want way of not having list each of meta-data links:

$('body').on('click','a[href ^= "#cb"]',function(e){ // should catch of meta data links // need find target div using href  // attribute of link has been clicked })