Как сделать div в полноэкранном режиме и поверх всех других элементов с помощью jQuery?

Question

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

Есть ли простой способ сделать это?

Answer 1

Определите стиль 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');
}

Answer 2

Полноэкранный 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>

Answer 3

При этом вы хотите отключить пользователь / ввод?

Проверьте это: http://malsup.com/jquery/block/

Блокирующие элементы: http://malsup.com/jquery/block/#element

Блокировка всей страницы: http://malsup.com/jquery/block/#page

1012 * Rgds *

Answer 4

Чтобы сделать его полноэкранным, установите следующие стили:

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

Чтобы поставить его сверху, установите значение z-index на что-то большее, чем остальные элементы на странице.

z-index: 99;

Вы можете установить все это с помощью таблицы стилей, а затем просто использовать jQuery, чтобы показать / скрыть div.