Часто делая анимации или просто модальные окна надо заблокировать остальные элементы на странице.
Если с модальным окном все довольно просто, то с анимациями есть одна пикантная деталь, узнав которую я даже поднял обе брови от удивления.
Что за деталь? Да просто анимации выполняются в отдельном потоке. Это значит, что если не терпеливый пользователь будет агрессивно тыкать в кнопку... На каждом тыке будет запускаться новая анимашка и на экране образуется жуткая каша из дублей модальных окон.
Дня два сам ломал голову вопросом
как заблокировать страницу на время выполнения анимации... В итоге, по-нормальному это не делается никак - только накладывать div пустышку с большим z-index. У меня свистоперделок много и блокировать при выполнении одной все остальные - раздутое по коду решение.
Если руки из попы, можно воспользоваться плагином jQuery. Но я предложу вам самописную функцию, которая в разы меньше плагина. Мой код на одной ладони как шпаргалку записать можно.
Короче код.
//Блокировка элемента:
//it = блокируемый элемент
//make = значения on или off
function locker(it,make){
if(make=="on"){
$(it).append('<div id="locker" style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:auto"></div>') //блочим
}
if(make=="off"){
$(it+">#locker").remove() //разлочиваем
}
}
Копипастите себе эти строки (функция должна быть выше мест ее вызова), а потом вызываете функцию.
Заблокировать можно все что угодно, хоть весь <body> хоть весь <html> :smile-thumb-up:
С селекторами ничего сложного.
Блокировка//блокируем body (а модальное окно можно append'нуть за пределы боди)
locker("body","on")
//блокируем html (то есть вообще все нафиг залочить, чтобы кривые руки не кликали когда не следует)
locker("html","on")
//блочим по классу
locker(".class","on")
//блочим по id
locker("#id","on")
РазблокировкаДля снятия блокировки достаточно еще раз позвать замечательную функцию, но вторым аргументом будет off
//разблокируем body
locker("body","off")
Если вам нужно снять блокировку только после завершения анимации, пихайте вызов разлочки в калбак animate. Если позвать функцию просто после анимации - она сработает согласно выполнению JS-файла. Анимации идут в отдельном потоке - не забываем!
Примерчик.
locker ("#id", "on") //заблокируем
//свистим, пердим, анимируем
$("#div").animate ({
top: "+=200px",
left: "+=200px"
}, 5000, locker("#id", "off") //разблокируем
)
Если вы не понимаете почему я написал в блокирующем div'е значение
z-index: auto вы можете заменить его цифрой типа 9999999, но лучше прочитать доки по z-index.
Итого - плагин не нужен ИМХО. :friends:
Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
|