使用 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

基本思想是在页面上放置一个（半）透明的 div ，并将模式对话框放在顶部。 jqModal 插件是我所知道的最简单的脚本，可以为您完成此操作。

不管怎样，这些被称为“模式对话框”，谷歌搜索会找到无穷无尽的资源。

Answer 4

您可以使用 JQuery 轻松地做到这一点。使用 jquery 模型对话框并将 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