Internet explorer 7 Popup modal not opening

Question

Я пробую его в течение 2 дней, но я не уверен, как исправить эту проблему.

На firefox и хромированном рабочем состоянии. плюс в последнем IE он также работает, но на IE7 и IE8 всплывающее окно не открывается.

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

Что я пытаюсь сделать. при щелчке по балону открывается всплывающее окно с небольшим количеством данных. но при нажатии на MetaData в этом всплывающем окне должен открыться другой всплывающий модальный. он отлично работает в других случаях, кроме IE7 и IE8.

Что делать ??

= - == - == - =

например

кнопку MetaData показ в 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 при нажатии кнопки. Ниже приведен Модаль.

<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>

• Когда щелкнули ссылку с href, которая ссылается на этот идентификатор (<a href="#CB00070">...</a>), этот div станет целью щелчка.

• Мишень div наследуют любой :target стиль, который был указан для этого, в этом случае visibility:visible; opacity:1;

К сожалению версии IE менее 9 не ведут себя таким образом, как селектор :target был введен в более поздняя версия CSS (http://caniuse.com/#feat=css-sel3)

Если вам действительно нужно поддерживать более старые версии IE, вы можете попробовать выявить соответствующий <div>, добавив класс, который откроет его и удалит класс h Ide это снова, что-то вроде:

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