JS / CSS - Показать полупрозрачный слой поверх веб-страницы для пользователей с ограниченными возможностями JS - PullRequest
Новая
       45

JS / CSS - Показать полупрозрачный слой поверх веб-страницы для пользователей с ограниченными возможностями JS

0 голосов
/ 26 сентября 2011

Мое описание

У меня есть веб-приложение, которое сильно зависит от Javascript и JQuery.Если пользователь отключил JS в настройках своего браузера, веб-сайт работает не так, как должен, хотя он все еще работает.

Я хотел бы запретить пользователям видеть мой веб-сайт с отключенным JS, но без перенаправления.их на страницу без JavaScript.Я хотел бы предупредить моего пользователя, что JS должен быть включен в хорошо представленном методе CSS.

Если JS отключен, я хотел бы показать полупрозрачный / белый слой CSS, отображаемый поверх моей веб-страницы.шириной 100% и высотой 100%, с любезными словами, описывающими проблему для моего пользователя, и, возможно, с инструкциями по включению JS.

Мой план

  • Наличие полупрозрачного слоя CSS 100% x 100% для покрытия моей веб-страницы на каждой странице.
  • Наличие функции загрузки Javascript, которая при загрузке страницыудаляет слой.Поэтому, если не найден Javascript, он не удалит слой.

Мой вопрос

Это лучший способ сделать это?Если да, можете ли вы помочь мне с функцией Javascript, которая закрывает слой CSS при загрузке, или объясните мне, что должна включать функция, чтобы эта работа работала?Мой Javascript отстой ...

Ответы [ 4 ]

2 голосов
/ 26 сентября 2011

Добавьте слой в тег noscript и введите стиль тега noscript, добавьте свой текст в тег noscript. 

#noscript {top:0; left:0; height:100%; width:100%; opacity: 0.5; background: white;}
1 голос
/ 26 сентября 2011

Звучит как работоспособное решение.

Скрыть слой довольно просто. 

$(function () {
    $("#layerId").hide();
});

Настройка слоя таким образом, чтобы он выглядел правильно, - вот где на самом деле работа.

0 голосов
/ 26 сентября 2011

Обычная техника для такого рода вещей ( Modernizr использует этот подход) - сделать что-то вроде следующего.

Начните с этого в своем CSS ... 

#my-warning-message {display:block; width:...}
.js #my-warning-message {display:none;}

Тогда в вашем JS ... 

$('html').addClass('js');
0 голосов
/ 26 сентября 2011

Поместите HTML-разметку для отключенного предупреждения в тег <noscript>, а затем введите желаемый стиль.

W3Schools

...