2008-10-06 51 views
2

我有一个网页,其中包含一个选择框。当我打开一个jQuery对话框时,它部分显示在选择框后面。jQuery:在IE6窗口控件的问题

我该如何解决这个问题?我应该隐藏选择框还是jQuery提供某种'填充'解决方案? (我用Google搜索,但没有发现任何东西)

下面是一些代码:

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

回答

2

这不会有什么用jQuery尤其如此。这是IE 6中的一个已知错误 - Windows本机选择框总是出现在其他元素的顶部。你可以做的唯一的事情就是隐藏选择框,当它们被掩盖时 - 通常用看起来像选择框的东西替换它们。

+0

是的,我意识到这一点。我一直在使用mootools和cnet的ui框架。ui framwork做了一些iframe当打开一个对话框iframe阻止了选择框 – paul 2008-10-06 11:19:10

2

我最终发现一个插件可以帮助 - bgiframe奇怪的是,它可以作为一个插件使用。为什么它没有被集成到主UI中?

试过了,但不幸的是,它搞砸了我的对话!对话框内容全部左移30-40像素:-(。下一个问题...