2010年7月16日金曜日

IE6でdiv要素をセレクトボックスに勝たせる

div要素でposition: absolute;など指定してポップアップ部品
などを作成することがありますが、
IE6だとdiv要素がセレクトボックスに負けてしまいます。

なのでiframeでかぶせてz-indexを指定することで
セレクトボックスに勝つようにする対応する必要があります。

また、上記対応をしてもブラウザ横スクロールが動作すると
何故かセレクトボックスに負けてしまうので
scrollイベントでスタイルの再割り当てを行うことで勝つ!
ちょっとちらつくけど。。他に方法ないかな~

function iframeCover() {
    //isIe6()はIE6の場合trueを返す関数
    if (isIe6()) {
        var targetObj =document.getElementById("divtarget");
        var html = "<iframe id=\"overlayframe\" src=\"javascript:false\" style=\"position: absolute; display: block; "
            + "z-index: -1; width: 100%; height: 100%; top: 0; left: 0;"
            + "filter: mask(); background-color: #ffffff; \"></iframe>";
        targetObj.innerHTML += html;
        
        // scrollイベントでstyleの再割り当て
        jQuery(window).bind("scroll", function(){
            var targetObj = document.getElementById("divtarget");
            // 何でもよいのでstyleの再割り当てを行う。
            var orignalBorder = targetObj.style.border;
            targetObj.style.border = 1;
            targetObj.style.border = orignalBorder;
        });
    }
}

0 件のコメント:

コメントを投稿