использование css или jQuery для предотвращения реакции страницы на события

Question

Название немного сбивает с толку, я знаю, но я не совсем знал, как сформулировать свой вопрос.

мой сайт - http://gx61design.com - имеет окно оповещения, которое отображается на загрузке. Мне нужно сделать его своего рода модальным окном, чтобы при его обнаружении вы не могли использовать клавиши со стрелками или наводить курсор на элементы на странице, как вы можете в данный момент

Answer 1

Мы используем jQuery UI - диалоги в нашем нынешнем проекте. Модальное диалоговое окно вызывает маску, которая будет препятствовать взаимодействию со страницей внизу, пока пользователь не нажмет кнопку или не закроет диалоговое окно.

Очень прост в использовании!

Answer 2

Вы можете установить глобальную переменную, чтобы видеть, отклонил ли пользователь диалог и отменить события стрелки, пока пользователь не отклонит диалоговое окно.Поэтому, используя код со своей страницы:

var can_use_keys = false;

apprise('Hi all, Welcome to may site that was inspired by the original Xbox 360 NXE Dashboard. This site can be navigated by using the Arrow Keys Left and Right', {
    'animate' : true,
    verify : 'true'
}, function(r) {
    if(r) {
        can_use_keys = true;
    }
});
$(".dashboard_panels > div").dashboard({
    point : 'end'
});
$.dashboard.create();

$('body').keydown(function(event) {
    if(can_use_keys === true) {
        if(event.which == '39') {
            $.dashboard.navigate('right');
        }

        if(event.which == '37') {
            $.dashboard.navigate('left');
        }

        if(event.which == '49') {
            $.dashboard.position('init');
        }

        if(event.which == '50') {
            $.dashboard.position('middle');
        }

        if(event.which == '51') {
            $.dashboard.position('end');
        }

        if(event.which == '77') {
            $.dashboard.toggle();
        }
    } else {
        return false;
    }
});

, или вы можете напрямую включить функцию привязки клавиш в функцию обратного вызова apprise:

apprise('Hi all, Welcome to may site that was inspired by the original Xbox 360 NXE Dashboard. This site can be navigated by using the Arrow Keys Left and Right', {
    'animate' : true,
    verify : 'true'
}, function(r) {
    if(r) {
        $('body').keydown(function(event) {

        if(event.which == '39') {
            $.dashboard.navigate('right');
        }

        if(event.which == '37') {
            $.dashboard.navigate('left');
        }

        if(event.which == '49') {
            $.dashboard.position('init');
        }

        if(event.which == '50') {
            $.dashboard.position('middle');
        }

        if(event.which == '51') {
            $.dashboard.position('end');
        }

        if(event.which == '77') {
            $.dashboard.toggle();
        }

});
    }
});
$(".dashboard_panels > div").dashboard({
    point : 'end'
});
$.dashboard.create();

Answer 3

Вы можете легко сделать это с JQuery. Используйте диалоговое окно jquery model и установите для параметра model значение true.

<div id="dialog-modal" title="Basic modal dialog">
    <p>your message here...</p>
</div>

   <script>
    $(function() {

        $( "#dialog-modal" ).dialog({
            modal: true
        });
    });
    </script>

http://jqueryui.com/demos/dialog/#modal

Answer 4

Основная идея - поместить (полу) -прозрачный div поверх вашей страницы с модальным диалоговым окном вверху.Плагин jqModal - это самый простой из известных мне скриптов, который делает это за вас.

В любом случае, они называются "модальными диалогами", и поиск в Google приведет к бесконечным ресурсам.