web-dev-qa-db-ja.com

jQueryを使用してdivをフルスクリーンにし、他のすべての要素の上に配置するにはどうすればよいですか？

<div style="background-color:grey">
</div>

それを行う簡単な方法はありますか？

jqueryfullscreen
17
user198729

スタイルoverlayなどを定義します。

<style>
  .overlay {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
  }
</style>

次に、jQueryを使用して次のような新しいクラスを追加できます。

$('#myDiv').addClass('overlay');

クリックイベントで追加する場合は、次のようにします。

$('a').click(function(){
  $('#myDiv').addClass('overlay');
}

または、display:noneを.overlayクラスに追加して、ページの読み込み時に非表示にし、jQuery click関数に次のように表示させることもできます。

$('a').click(function(){
  $('.overlay').show('slow');
}
30
jay

フルスクリーンのajaxローダー、不透明度あり

を使用して

$('#mydiv').show(); 
$('#mydiv').hide();

それを切り替えるために。

#mydiv {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
    opacity: .8;
 }

.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px;  /* -1 * image height / 2 */
    display: block;     
}

<div id="mydiv">
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>
3
bulltorious

そうしている間、あなたはユーザー/入力を無効にしたいですか？

これを確認してください： http://malsup.com/jquery/block/

ブロッキング要素： http://malsup.com/jquery/block/#element

ページ全体をブロックする： http://malsup.com/jquery/block/#page

Rgds

1
effkay

フルスクリーンにするには、次のスタイルを設定します。

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

一番上に配置するには、z-index値をページ上の残りの要素よりも高い値に設定します。

z-index: 99;

これらすべてをスタイルシートで設定してから、jQueryを使用してdivを表示/非表示にすることができます。

0
Corey