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

Ответ 1

Определите стиль overlay или что-то вроде этого:

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

Затем вы можете добавить новый класс, как это, используя jQuery:

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

Если вы хотите добавить событие click, вы сделаете что-то вроде этого:

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

Или вы можете добавить display:none в класс .overlay, чтобы он был скрыт при загрузке страницы, а затем ваша функция jQuery click показывает это следующим образом:

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

Ответ 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>

Ответ 3

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

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

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

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

Rgds

Ответ 4

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

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

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

z-index: 99;

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