How to show/hide modal popup before and after send message to clients using jquery in asp.net c#

I want to show a modal popup message before sending the messages to clients and hide that modal popup after sent messages to clients (show/hide) to achieve this concept I have written below logic.

Note(my logic should work like this):- While sending the messages to clients the modal popup should show like "you will receive messages shortly please wait a moment once done popup will close" and once all messages sent to clients the modal popup should hide.

Modal popup logic:-

<div class="modal fade " id="modal_loader" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-bs-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-body">
                            <div class="form-group row">
                                <div class="loader"> <img src="assets/images/loding_animation.gif" /></div>
                                <p> <center>you will receive messages shortly please wait a moment once done popup will close</center></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

HTML logic is:-

<a href="javascript://" title="Export to Whatsapp" id="plrepobulkwhatsapp" onclick="plreportexportexcel_pdftoemail()" class="btn btn-success">Email</a>

And jquery logic is:-

function plreportexportexcel_pdftoemail() {

$("#modal_loader").modal('show');

var msg = Successmessage("abc");
if (msg != "")
        {
            $("#modal_loader").modal('hide');
            alert(bulkexcelpdfmsg);
        }

}

In Successmessage(code) method I written the ajax logic to execute the GenerateCustomPDF_ExcelBulk method and getting the msg return data.

aspx.cs:-

[WebMethod]
public static string GenerateCustomPDF_ExcelBulk(string clientcode)
{    
        string msg = "";

       //Here I written my required logic and returned the success message 
       //msg = "success";
        return msg;
}

Here my requirement is if I click the <a> tag my plreportexportexcel_pdftoemail() method will execute and should show the modal_loader popup message and once I receive the msg response
from backend GenerateCustomPDF_ExcelBulk method the modal_loader popup message should hide like this I have written logic but it is not executing properly.

Suggest me where I did the mistake in my code to show/hide the popup msg?

Sorry for my bad English.

New:- Added Successmessage Function Loigic :-

function Successmessage(clientcode) {

//$("#modal_loader").modal('show');

var sus = "";
var param = { clientcode: clientcode };

var res = $.ajax({

    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "reports.aspx/GenerateCustomPDF_ExcelBulk",
    dataType: "json",
    //data: "{}",
    data: JSON.stringify(param),
    success: function (response) {


        //$("#modal_loader").modal('hide');

        sus = response.d;

    },
    async: false,
    error: function (err) {
        console.log("eror is ==> .. " + err);
    }

});



return sus;

}

This is a pretty common confusion when using ajax.

Javascript is async (for the most part).

So instead of trying to return a value from the "SuccessMessage" function, you should instead try to execute your logic in the specific "callback" function.

Otherwise you end up with undesired effects like the "modal('show')" executing after the webrequest.

I had to make 3 changes to make your code work:

1- Use the "success" callback. This will be executed after the web request has successfully completed. Notice I made it "async:true". Also I am not returning anything form this function.

So your code should be like this:

function SuccessMessage(clientCode) {
    var param = { clientcode: clientCode };
    $.ajax({

        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "reports.aspx/GenerateCustomPDF_ExcelBulk",
        dataType: "json",
        //data: "{}",
        data: JSON.stringify(param),
        success: function (response) {

            //execute your logic here
            if(response !== undefined && response !== null){
                var msg = response.d;

                if (msg !== undefined && msg !== null && msg.trim() != "") {
                    console.log("notempty");
                    //added this delay for demo purposes only
                    setTimeout(function () {
                        $("#modal_loader").modal('hide');
                    }, 1000);
                } else {
                    console.log("empty");
                }
            }
            
        },
        async: true,
        error: function (err) {
            //error is an object not a string
            console.log(err);
        }

    });
}

2- Change the plreportexportexcel_pdftoemail function. It had a typo "Successmessage" instead of "SuccessMessage"... remember javascript is case sensitive.

function plreportexportexcel_pdftoemail() {

    $("#modal_loader").modal('show');

    SuccessMessage("abc");
}

3- Change the C# action to return Json because your function is always returning an empty string. If you dont return Json the jQuery Ajax call will not hit the success function and instead hit the error callback.

public string GenerateCustomPDF_ExcelBulk(string clientcode)
{
    string msg = "123ABC";

    //there are better ways to convert to json like Newtonsoft
    return $"{{ \"d\":\"{msg}\" }}";
}

Finally all of this executes real fast so it looks weird if the C# does not take time to process... It would show and hide the modal really fast.
So I added a javascript "delay" using a setTimeout, just for demo purposes. You should do what is best for your code.