JQuery busy indicator doesn't disable keyboard events

Question

I have integrated a Jquery busy indicator in my app from this link: http://www.aspsnippets.com/demos/1331/

It doesn't let the user click on input elements while loading. But if I press tab I can easily navigate to those input elements and enter whatever I want and press enter on button to send a service call. This defeats the whole purpose of busy indicator. Any idea how I can fix it?

This is the css:

.busy-modal
    {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-color: Black;
        filter: alpha(opacity=60);
        opacity: 0.6;
        -moz-opacity: 0.8;
    }
    .busy-center
    {
        z-index: 1000;
        margin: 300px auto;
        padding: 10px;
        width: 130px;
        background-color: White;
        border-radius: 10px;
        filter: alpha(opacity=100);
        opacity: 1;
        -moz-opacity: 1;
    }
    .busy-center img
    {
        height: 128px;
        width: 106px;
    }

Answer 1

我通过在忙碌指示器上手动禁用键盘输入来修复它。我是这样做的：

在我的angularJS控制器中，我声明了一个变量，它将决定是否禁用键盘输入

$scope.disableKeys = false;

然后我添加了以下禁用键盘输入的代码

window.addEventListener('keydown', function (event) {

    if ($scope.disableKeys == true) {
        event.preventDefault();
        return false;
    }
});

这是我的busyIndi​​cator功能：

function busyIndicator(type)
{
    if(type == 1)
    {           
        $scope.disableKeys = true;
        $(".busy-modal").show();
    }
    else if (type == 0)
    {
        $scope.disableKeys = false;
        $(".busy-modal").hide();
    }
}

最后，调用此函数：

//to show busy indicator
busyIndicator(1);

//to hide busy indicator
busyIndicator(0);

就是这样。