jQuery: problema con i controlli con finestra in IE6

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

Domanda

Ho una pagina web che contiene una casella di selezione. Quando apro una finestra di dialogo jQuery, questa viene visualizzata in parte dietro la casella di selezione.

Come devo affrontare questo problema? Devo nascondere la casella di selezione o jQuery offre una sorta di soluzione "shim". (Ho cercato su Google ma non ho trovato nulla)

Ecco un po 'di codice: 

<!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>
È stato utile?

Soluzione

Questo non ha nulla a che fare con jQuery in particolare. Questo è un bug noto in IE 6: le caselle di selezione native di Windows vengono sempre visualizzate sopra altri elementi. L'unica cosa che puoi fare è nascondere le caselle di selezione quando sono coperte, in genere sostituendole con qualcosa che assomiglia alla casella di selezione.

Altri suggerimenti

Alla fine ho trovato un plug-in che aiuta - bgiframe Strano che sia disponibile come un plug-in. Perché non è integrato nell'interfaccia utente principale ?!

L'ho provato ma, sfortunatamente, rovina il mio dialogo! I contenuti della finestra di dialogo vengono tutti spostati a sinistra di 30-40 pixel :-(. Prossimo problema ...

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top