2008-10-06 7 views
2

J'ai une page Web qui contient une zone de sélection. Lorsque j'ouvre une boîte de dialogue jQuery, elle s'affiche partiellement derrière la boîte de sélection.jQuery: Problème avec les contrôles fenêtrés dans IE6

Comment aborder ce problème? Dois-je cacher la boîte de sélection ou jQuery offre-t-elle une sorte de solution «shim»? (Je l'ai googlé mais n'a pas trouvé quoi que ce soit)

Voici un code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>testJQuery</title> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<meta name="GENERATOR" content="Rational Application Developer"> 

     <link rel="stylesheet" href="theme/smooth/theme.css" type="text/css" media="screen" /> 
</head> 
<body> 

    <a class="pop" href="nix">Click me</a> 

    <p/> 

    <select size="20"> 
     <option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option> 
     <option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option> 
     <option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option> 
     <option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option> 
     <option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option> 
    </select> 

    <div id="xyz" class="flora hiddenAsset"> 
     <div id="dialog" title="Edit Link"> 
      <p>Enter the link details:</p> 
      <table width="80%" border="1"> 
       <tr><td>URL</td><td><input id="url" style="width:100%" maxlength="200" value="{url}"/></td></tr> 
       <tr><td>Title</td><td><input id="title" style="width:100%" maxlength="200" value="{title}"/></td></tr> 
       <tr><td>Target</td><td><input id="target" size="20" maxlength="200" value="{target}"/></td></tr> 
      </table> 
     </div> 
    </div> 

<script type="text/javascript" src="../script/firebug/firebug.js"></script> 
<script type="text/javascript" src="jquery-1.2.6.js"></script> 
<script type="text/javascript" src="jquery-ui-1.5.2.js"></script> 
<script type="text/javascript" src="jqSOAPClient.js"></script> 
<script type="text/javascript"> 
(function($){ 
    $(document).ready(function(){ 
     console.debug('ready'); 
     $('.hiddenAsset').hide(); 

     $('a.pop').bind('click', showDialog); 
     console.debug('ready - done'); 
    }); 

    var showDialog = function(){ 
     console.debug('show'); 
     $('#dialog').dialog({ 
      modal: true, 
      overlay: { 
       backgroundColor: '#666', 
       opacity: '.3', 
       filter: 'alpha(opacity=30)' 
      }, 
      width: '400px', 
      height: '300px', 
      buttons: { 
       Ok: function() { 
        $(this).dialog('close'); 
       }, 
       Cancel: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
     console.debug('show-done'); 
     return false; 
    }; 
})(jQuery); 
</script> 
</body> 
</html> 

Répondre

2

Cela n'a rien à voir avec jQuery en particulier. Ceci est un bug connu dans IE 6 - Les boîtes de sélection natives de Windows apparaissent toujours au-dessus des autres éléments. La seule chose que vous pouvez faire est de cacher les boîtes de sélection quand elles sont couvertes - habituellement les remplacer par quelque chose qui ressemble à la boîte de sélection.

+0

Oui, je me rends compte que j'avais utilisé mootools et un framework ui de cnet. iframe a supprimé les boîtes de sélection – paul

+0

Pouvez-vous couvrir une boîte de sélection avec un iframe? Ce serait plus facile que de la remplacer par une fausse boîte de sélection, de toute façon c'est hors de mon expérience Bonne chance! – Neall

2

J'ai finalement trouvé un plug-in qui aide - bgiframe Étrange qu'il est disponible en tant que plug-in. Pourquoi n'est-il pas intégré dans l'interface utilisateur principale ?!

Essayé, mais, malheureusement, il visse ma boîte de dialogue! Le contenu de la boîte de dialogue est décalé de 30-40 pixels :-(Problème suivant ...

Questions connexes