jQuery：IE6のウィンドウコントロールの問題

StackOverflow https://stackoverflow.com/questions/173866

質問

選択ボックスを含むWebページがあります。 jQueryダイアログを開くと、選択ボックスの後ろに部分的に表示されます。

この問題にどのように取り組むべきですか？選択ボックスを非表示にするか、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>
役に立ちましたか？

解決

これは、特にjQueryとは何の関係もありません。これはIE 6の既知のバグです。Windowsネイティブの選択ボックスは常に他の要素の上に表示されます。できることは、選択ボックスが隠されたときに非表示にすることだけです。通常は、選択ボックスのように見えるものに置き換えます。

他のヒント

最終的に役立つプラグインを見つけました- bgiframe プラグイン。メインUIに統合されていないのはなぜですか？

試してみましたが、残念ながら、ダイアログが台無しになりました！ダイアログの内容はすべて30〜40ピクセル左にシフトされます:-(。次の問題...

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top