javascript - div要素をフルページするには?

Question

1 つの div コンテナーをフル ページに設定し (ズームのように、ページの他の要素を表示せずに)、ユーザーがエスケープを実行するか、div 要素の外側をクリックすることで通常に戻ることができるようにする方法があるかどうか疑問に思います。

Answer 1

このソリューションには jQuery UI を使用します。それは本当にシンプルで簡単です。

これは、この効果のフルスクリーン動作デモです

これがフィドルを少しずつ分解したものです

そしてもちろん、コード ->

HTML ->

<div class="body">
  <a href="#" id="open-modal"> Open Modal </a>
  <div class="overlay"></div>  
  <div id="modal" title="the modal"> Modal </div>
</div>

CSS ->

body{
  height:100%;
  width:100%;
  padding:50px;
}
.ui-widget-overlay{
  z-index:10;   
}
.ui-dialog{
  z-index:20;   
}

jQuery ->

$('#modal').dialog({
  'autoOpen' : false,
  'modal' : true
});
$('#open-modal').click(function(){
  $('#modal').dialog('open');
  $('.overlay').addClass('ui-widget-overlay');    
});

$(document).on('click', '.ui-widget-overlay', function(){
  $(this).removeClass('ui-widget-overlay');
  $('#modal').dialog('close');    
});