如何填充div元素？

Question

我想知道是否有任何方法可以将一个div容器设置为整页（如缩放，没有显示页面的其他元素）并允许用户通过执行转义或在div外部单击来恢复正常元件。

Answer 1

我使用jQuery UI来实现此解决方案。这非常简单直接。

Here's the Fullscreen working Demo of this effect

Here's the Fiddle broken down piece by piece

当然，代码 - ＆gt;

HTML - ＆gt;

<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 - ＆gt;

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

jQuery - ＆gt;

$('#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');    
});