ASP.NET MVC Bootstrap Model Dialog: Intermediate exception Model Background is under modal background

I recently encountered this bootstrap modal window problem that the modal dialog window is closed but the background is still in-active and completely blocked.

Here is my scenario, when I opens the model dialog window on click on link and it makes Ajax call to get model data from server. But due to this some delay, user will be allowed to click more than one time, it opens multiple Modal dialog window and I close the modal window , model widow is getting closed but the background screen is still blocked. Screen shot attached for reference 

I investigated into this problem and found that when the modal window is getting open, for modal background experience,  it always adds new DIV with modal-backdrop CSS in HTML BODY so background screen is completely blocked and when modal dialog window is closed, it removes this DIV from HTML BODY and the background screen becomes active.

<div class="modal-backdrop fade in"></div>

In my scenario, multiple modal window are being opened and it added more than one DIV in HTML BODY to block the back ground screen and on closing of Modal dialog window it removes only one DIV from HTML body and still there are DIV in HTML BODY to block the Background screen.

To resolve this issue I used the below code to remove all the extra DIV from HTML BODY on closing of Model window.

$(document).on('hidden.bs.modal', '.modal', function () {

    if ($(".modal-backdrop").length > -1) {

        $(".modal-backdrop").remove();

    }

});