javascript - 如何整页div元素？

Question

我想知道是否有任何方法可以将一个 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');    
});