Question

The title is a bit confusing I know but I wasnt quite sure how to word my question.

my site — http://gx61design.com — has a alert box that shows up onLoad I need to make it a sort of modal box so that when it shows up you cannot use the arrow keys or hover over the elements in the page like you can at the moment

Answer 1

You can set up a global variable to see if user dismissed a dialog and cancel arrow events until a user dismisses the dialog box. So using the code from your page:

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;
    }
});

or you could put the key binding function in the apprise callback function directly:

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();