javascript - ajaxリクエスト中にAjaxオーバーレイが表示されない

Question

$("#keywordSearchSubmit").on("click", function()
{
    showOverlay();
    var searchString = $("#search-results-form-query").val();
    var manResult = $.ajax({
        url: "Order?Page=storeSearchKeyword",
        data: "searchString="+searchString,
        async: false
    }).responseText;
    $("#cart-product-list").empty();
    $("#cart-product-list").append(manResult);
    hideOverlay();
});

function showOverlay()
{
//alert('a');
 $("#overlay").css("display","block");
//document.getElementById("overlay").style.display = 'block';
}

function hideOverlay()
{
//alert('b');
$("#overlay").css({"display":"none"});
//document.getElementById("overlay").style.display = 'none';
}

ajax呼び出しの実行中にオーバーレイが表示されるように、上記のJavascriptを取得しました。以下は、オーバーレイの HTML です。

<div id=\"overlay\" style=\"display:none;\">
<div style=\"display:block; margin-left: auto; margin-right: auto; margin-top:15%\" class=\"bubblingG\">
<span id=\"bubblingG_1\"></span><span id=\"bubblingG_2\"></span><span id=\"bubblingG_3\">
</span></div></div>

上記のどの種類の JavaScript を使用しても、オーバーレイは表示されません。

document.getElement... $("#overlay")...

オーバーレイが表示されるのは、アラート ボックスを追加するときだけです。アラート ボックスで [OK] をクリックすると、オーバーレイが表示されます。

私はもう試した：

$("#overlay").trigger("create");

しかし、成功しません。上記のようなメソッドを呼び出すのではなく、jQuery の start と complete を使用できることはわかっていますが、オーバーレイが表示される前にアラートを使用した場合にのみ表示されます。

リクエストがサーバー側で処理されるのに約 5 秒かかるため、オーバーレイが確実に表示されます。