How to solve bootbox.dialog() running in the background? can't click anything

Question

I'm developing a web application for a client.

I use bootbox.js to display the error message to the user, but I faced a problem and I just don't know where to correct this problem.

This is click event:

$("#login").click(function() {
    var username = $("#login_username").val();
    var password = $("#login_password").val();

    if(username == "")
    {
        //alert("Please enter username");
        $("#login_username").focus();
    }
    else if(password == "")
    {
        //bootbox.alert("Please enter password");   
        $("#login_password").focus();
    }
    else
    {
        var dataString = "username=" + username + "&password=" + password;
        $.ajax({
            type: "POST",
            url: "ajax/members/ajaxLogin.php",
            data: dataString,
            cache: false,
            beforeSend: function(){
                $("#login").val("Checking...");
            },
            success: function(response){
                var response_message = response.indexOf("members");
                if(response_message != -1)
                {
                    window.location.assign(getBaseURL() + response);   
                }
                else
                {
                    bootbox.dialog({
                        message: response,
                        title: "Error",
                        buttons: {
                            success: {
                                label: "Error!",
                                className: "btn-warning",
                            },
                        }
                    });
                }
            }
        });
    }
});

but this dialog is seem as follow please follow this link to see the example image:

How to solve this problem please help

I use boostrap v.3.3.2 and JQuery 1.11.2