jQuery: Problem mit Fenstersteuer in IE6

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

Frage

Ich habe eine Webseite, die ein Auswahlfeld enthält. Wenn ich einen jQuery Dialog öffnen wird er teilweise hinter dem Auswahlfeld angezeigt.

Wie soll ich mich wenden, dieses Problem? Sollte ich Ausblenden der Auswahlbox oder nicht jQuery eine Art ‚Shim‘ Lösung bieten. (Ich habe gegoogelt, aber das findet nichts)

Hier ist ein 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>
War es hilfreich?

Lösung

Das hat nichts mit jQuery zu tun, insbesondere. Dies ist ein bekannter Fehler in IE 6 - nativen Windows-Auswahlbox immer auf anderen Elementen erscheinen. Das einzige, was Sie tun können, ist die Auswahlbox verstecken, wenn sie nach oben abgedeckt sind -. In der Regel sie mit etwas zu ersetzen, die wie die Select-Box aussieht

Andere Tipps

Schließlich fand ich ein Plug-in, das hilft - bgiframe Seltsam, dass es verfügbar ist, wie ein Plug-in. Warum ist es nicht in dem Haupt-UI integriert?!

Versuchte es, aber es leider Schrauben meinen Dialog auf! Die Dialoginhalte werden alle verschobene von 30-40 Pixel links :-(. Nächstes Problem ...

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top