2011-01-21 21 views
6

要素(例:<div>)をページの一番上のレイヤにしたいと考えています。CSS/JavaScript:要素の一番上のZ-インデックス/一番上のモーダル要素を

私がこれを行うための唯一の方法は、要素がブラウザが許す最大値(int32?)のstyle="z-index:"という値を持つように指定することです。

これは間違いありませんか?

代わりに、何らかの形で要素のz-indexが最高になるようにして、<div>z-index[highest element's value] + 1にすることはできますか?例:

$myDiv.css("z-index", $(document.body).highestZIndex() + 1); 

モーダルJavaScriptの「ウィンドウ」はどのように機能しますか?

+0

firefox最高Z-インデックスは2147483647です。 –

答えて

8

はそれを行う方法は次のとおりです。

var elements = document.getElementsByTagName("*"); 
var highest_index = 0; 

for (var i = 0; i < elements.length - 1; i++) { 
    if (parseInt(elements[i].style.zIndex) > highest_index) { 
     highest_index = parseInt(elements[i].style.zIndex; 
    } 
} 

highest_indexは今ちょうどその値に1を追加し、あなたが好きな場所にそれを適用する...ページ上の最高のzインデックスが含まれています。

再び
var highest_index = 0; 

$("[z-index]").each(function() { 
    if ($(this).attr("z-index") > highest_index) { 
     highest_index = $(this).attr("z-index"); 
    } 
}); 

、要素に新しいインデックスを適用するのと同じ方法:

$("your_element").attr("z-index", highest_index + 1); 
ここで別のjQueryを使用して同じことを達成する方法があります

your_element.style.zIndex = highest_index + 1; 

:そうのようにあなたはそれを適用することができます
+0

'i Shea

+1

'.attr'ではなく、' .css'を必ず使用してください! – Sir

+3

このアルゴリズムは非常に高価であり、このコードを頻繁に実行する場合は、クライアントUIのパフォーマンスが大幅に低下することに注意してください。 – Vadim

1

Z-indexは属性ではなくCSSスタイルであるため、SheaviのjQueryソリューションは機能しません。

は、代わりにこれを試してみてください:

raiseToHighestZindex = function(elem) { 
    var highest_index = 0; 
    $("*").each(function() { 
     var cur_zindex= $(this).css("z-index"); 
     if (cur_zindex > highest_index) { 
      highest_index = cur_zindex; 
      $(elem).css("z-index", cur_zindex + 1); 
     } 
    }); 
    return highest_index; 
}; 

戻り値は、JavaScriptの非同期な性質のために期待するものではないかもしれないが、任意の要素に対して関数を呼び出すと、正常に動作します。

+0

''戻り値はJavascriptの非同期性のために期待できないものです。 ''私が知っている唯一の非同期関数は 'setInterval'、' setTimeout'、 'AJAX'です。 – mr5

2

スタッキングコンテキストはどうですか? ではなく、が常に真である:文書では、最も高いzインデックスが上になる。参照:http://philipwalton.com/articles/what-no-one-told-you-about-z-index/。スタッキング・コンテキストを考慮に入れない場合、10億を設定するだけでは要素を最上位にすることはできません。

関連する問題