jQuery tools modal overlay display problem в IE6-8

Question

Я пытаюсь включить оверлей, чтобы быть модальным. Он отлично работает в FireFox, но объект окна находится за маской, когда он становится модальным. Это предотвращает любое взаимодействие с ним, и страница фактически бесполезна. Я попытался отлаживать это некоторое время и не могу понять это.

Вот ссылка на пример на их сайте: http://flowplayer.org/tools/demos/overlay/modal-dialog.html

$.fn.cfwindow = function(btnEvent,modal,draggable){ 
    //error checking 
    if(btnEvent == ""){ 
     alert('Error in window :\n Please provide an id that instantiates the window. '); 
    } 

    if(!modal && !draggable){ 
     $('#'+btnEvent+'[rel]').overlay(); 
     $('#content_overlay').css('cursor','default'); 
    } 

    if(!modal && draggable){ 
     $('#'+btnEvent+'[rel]').overlay(); 
     $('#content_overlay').css('cursor','move'); 
     $('#custom').draggable(); 
    } 

    if(modal){ 
     $('#'+btnEvent+'[rel]').overlay({ 
      // some mask tweaks suitable for modal dialogs 
      mask: { 
       color: '#646464', 
       loadSpeed: 200, 
       opacity: 0.6 
      }, 
      closeOnClick: false 
     }); 
     $('#content_overlay').css('cursor','default'); 
     $('#custom').addClass('modal'); 
    } 

}; 

Вот что я ссылки, когда я звоню через:

<script type="text/javascript">   
    $(document).ready(function(){ 
     $(document).pngFix(); 
     var modal = <cfoutput>#attributes.modal#; 
     var drag = #attributes.draggable#; 
     var btn = '#attributes.selector#'; 
     var src = '#attributes.source#'; 

     var wid = '#attributes.width#'; 

     $('##custom').width(parseInt(wid)); 

     $('div##load_content').load(src); 
     $('##custom').cfwindow(btn,modal,drag,wid); 
    }); 
</script> 

CSS для модального:

<style type="text/css"> 
    .modal { 
     display:none; 
     text-align:left;     
     background-color:#FFFFFF; 
     -moz-border-radius:6px; 
     -webkit-border-radius:6px; 

    } 
</style> 

Исключить и дополнительные знаки фунта, IE. "##".

Снимок экрана проблемы: http://twitpic.com/1tak06

Примечание: IE6 и IE8 имеют те же проблемы.

Любая помощь будет оценена по достоинству.

Update: HTML of the overlay/modal window: 

      <div class="simple_overlay" id="custom"> 
       <div id="content_overlay"> 
        <div id="handler"> 
         <div id="headerss"> 
          <h5 class="titless"><span style="color:##000000;">#attributes.title#</span></h5> 
          <div class="yellowRule"></div> 
         </div> 
         <div id="load_content">  

         </div>    
        </div> 
       </div> 
      </div> 

Обновлено: Добавить передний конец

<!-- overlay triggers. overlay is referenced in the 'rel' attribute --> 
    <p> 

     <button rel="#custom" type="button" id="openWindow">Email</button> 
    </p> 

    <cf_eo_window2 
     title="This modal isn't working in IE!" 
     selector="openWindow" 
     draggable="false" 
     width="350" 
     modal="true" 
     source="import-test.cfm" 
     /> 

Answer 1

Вы пробовали добавить Z-индекс: 999; к вашему .модальному? Я предполагаю, что у вашего div есть классное имя модального? Могу ли я увидеть, как вы создали свой html?

Answer 2

Я знаю, что это довольно старый вопрос, но я только что преодолел определенную проблему в IE6 & IE7 с наложением инструментов jQuery.

Мой div с классом «.modal» был вложен внутри контейнера div, который имел относительное положение, поэтому установка z-index, которую я пыталась заставить на модальном классе, не имела никакого эффекта.

Я переместил модальный div за пределами любых контейнеров, в моем случае, до самого нижнего края страницы непосредственно перед закрывающим тегом тела, и hey presto очень приятный наложение в IE6 & IE7.

Мне пришлось скопировать некоторый стиль из моего класса контейнеров в мой класс мода, но очень небольшое раздражение IMHO, чтобы получить желаемый результат для моего клиента, у которого все еще есть значительное число посетителей сайта, использующих IE6, и, конечно, более быстрый чем реализация совершенно другого плагина jQuery.

Answer 3

добавить к вашей странице, которая имеет накладку:

<!DOCTYPE html> 

Answer 4

у меня такая же проблема в IE8 и использовать стандардами ничуть не IE8 IE7, <!DOCTYPE html> не работает для меня. я создать пользовательскую маску:

#mask-modal{ 
position:absolute; 
z-index:9000; 
background-color:#fff; 
display:none; 
} 

<div id="#mask-modal"></div> 

    if (jQuery.browser.msie == true && jQuery.browser.version == 8) { 
     /* Carga el overlay confirmar */ 
     jQuery("#modalconfirmar .modalInput").overlay({ 
      // Calcula el centro de la ventana 
      top : ((jQuery(parent.document).height()/2) - (jQuery("#modalconfirmar").innerHeight() + 180)), 
      closeOnClick: false, 
      onBeforeLoad: function(){ 
       // @TODO cargar mask custom 

       //Get the screen height and width 
       var maskHeight = $(document).height(); 
       var maskWidth = $(window).width(); 

       //Set height and width to mask to fill up the whole screen 
       $('#mask-modal').css({ 
        'width':maskWidth, 
        'height':maskHeight 
       }); 

       $('#mask-modal').fadeTo(500,0.6); 
       // Load page into iframe 
       jQuery(document.body).css('overflow', 'hidden'); 
      }, 
      onLoad : function(){ 
       jQuery("#modalconfirmar").css('z-index', jQuery("#mask-modal").css('z-index') + 10); 
      }, 
      onClose : function(){ 
       jQuery("#modalconfirmar .si").off(); 
       $('#mask-modal').fadeOut(400); 
      } 
     });} 

Answer 5

Кончик не работал для меня, и для решения этой проблемы, я просто должен был пересмотреть UI-виджет-оверлей атрибут позиции в абсолют работать с IE 8, это не нажимает на открытую функцию моего диалога.

$dialog.dialog( { ..... ,open: function() {$('.ui-widget-overlay').css('position', 'absolute');} ,close: function() {$('.ui-widget-overlay').css('position', 'fixed');} ....}); Надеюсь, это поможет.