jQuery outils problème d'affichage de superposition modale dans IE6-8

Question

J'essaie d'activer la superposition pour être modale. Cela fonctionne parfaitement dans FireFox, mais l'objet fenêtre est derrière le masque quand il devient modal. Cela empêche toute interaction avec elle et la page est réellement inutile. J'ai essayé de déboguer ceci pendant un moment et ne peux pas le comprendre.

Voici un lien vers l'exemple sur leur site: 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'); 
    } 

}; 

C'est ce que je fais référence quand je l'appelle par:

<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 pour le modal:

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

    } 
</style> 

Exclure les signes supplémentaires de la livre, IE. "##".

Capture d'écran du problème: http://twitpic.com/1tak06

Note: IE6 et IE8 ont le même problème.

Toute aide serait appréciée.

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> 

Mise à jour: Ajouter extrémité avant

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

Avez-vous essayé d'ajouter un z-index: 999; à votre .modal? Je suppose que votre div a un nom de classe de modal? Puis-je voir comment vous avez configuré votre code HTML?

Answer 2

Je sais que c'est une question assez ancienne, mais je viens de surmonter le problème exact dans IE6 & IE7 avec jQuery Outils overlay. Ma div avec la classe ".modal" était imbriquée dans un conteneur div qui avait une position relative, donc le réglage de l'index z que j'essayais de forcer sur la classe modale n'avait aucun effet.

J'ai déplacé la div modale en dehors de tous les conteneurs, dans mon cas au bas de la page juste avant la balise de fermeture du corps, et hé presto une très belle superposition dans IE6 & IE7. J'ai dû copier un style de ma classe de conteneur dans ma classe modale, mais un très petit ennui à mon humble avis pour obtenir le résultat souhaité pour mon client qui a encore un nombre important de visiteurs du site utilisant IE6, et certainement un plus rapide solution que d'implémenter un plug-in jQuery totalement différent.

Answer 3

ajouter à votre page qui a la superposition:

<!DOCTYPE html> 

Answer 4

j'ai même problème dans IE8, et utiliser compability Whit IE8 pas IE7, <!DOCTYPE html> fonctionne pas pour moi. je crée un masque personnalisé:

#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

Le conseil n'a pas fonctionné pour moi, et pour résoudre le problème, je devais juste redéfinir l'attribut de position ui-widget-overlay absolu de travailler avec IE 8, cette est don sur la fonction ouverte de mon dialogue.

$dialog.dialog( { ..... ,open: function() {$('.ui-widget-overlay').css('position', 'absolute');} ,close: function() {$('.ui-widget-overlay').css('position', 'fixed');} ....}); Espérons que cela peut aider.