0

aspx ページに jquery ポップアップ ダイアログと asp.net ドロップダウン リスト コントロールを作成しました。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" ></script>
<script src="//code.jquery.com/ui/1.10.0/jquery-ui.js"  type="text/javascript" ></script>
<script type="text/javascript">

    $(document).ready(function () {

        $('#div_popup').dialog({     
            resizable: true,               
            height: 300,
            width: 300,
            position: 'center',
            zIndex: 10000              
        });

    });
</script>


<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" type="text/css" />
<style type="text/css" >
    #div_dropdownlist
    {
        margin-left : 50%;
        margin-top : 50%;     
        z-index: -1;        
    }
    #div_popup
    {}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div_dropdownlist">
    <asp:DropDownList runat="server" ID="ddlList" Width="200px"></asp:DropDownList>
</div>
<div id="div_popup">
        My test Popup
</div>
</form>
</body>
</html>

私の目的は、他のコントロールの上にドラッグすると、他のすべてのコントロールの上に jquery ダイアログ ポップアップを表示することです。
IE6 を除くすべてのブラウザーですべてが正常に動作します。

ここに画像の説明を入力

css zIndex を試してみました。ただし、IE6 では効果がありません。

それで、IE6で正しくする方法を教えてください。

更新しました

divポップアップスタイルをに変更しました

#div_popup
    {
        z-index: 10000;        
    }

そして、jqueryダイアログのcssスタイルを次のように変更しました

$('#div_popup').dialog({     
            ...

            zIndex: 10000              
        });

しかし、IE6 では、そのコントロールをドラッグすると、その jquery ポップアップが asp.net ドロップダウン リスト ボックスに表示されません。

参考までに、ここにmy_source_codeを示します。

4

1 に答える 1

0

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/で述べたように、 バグがあり、選択ボックスが一番上に表示されます。提案どおりに選択ボックスを非表示にするか、ie6 にシムを使用します。

于 2013-02-01T05:03:56.433 に答える