mvc popup window keep open when call backend api call

Question

I am doing and MVC Application. In the page I have a button that open an popup windows. The Popup windows like this

<div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addUpdateModalModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <h5 class="modal-title custom-model-title-dependent" id="ModalLabel">Mark Acceptable</h5>
                <button type="button" class="btn-close" data-mdb-dismiss="modal" onclick="Dispose()" aria-label="Close"></button>
            </div>
            <div id="dvOperation">
            </div>
            <div class="col-md-11 text-start mt-2 mx-1" style="display: flex; flex-wrap: wrap;">
                <div class="modal-body" style="padding-top: 0px;">
                    <p class="disability-font-16" style="text-align: justify; font-weight: 400; max-width: 100%; padding-top: 8px">
                        Marking this coverage configuration as acceptable will permanently remove it from this report. Proceed?
                    </p>
                </div>
            </div>
            <div class="modal-footer" Style="padding-right:3rem">
                <button type="button" class="btn btn-sm btn-secondary btn-light" onclick="Dispose(), Continue()">
                    <span class="t-trash icon icon-sm"></span>Cancel
                </button>
                <button data-bs-toggle="modal" data-bs-target="#PageWaiting" onclick=" Continue()" type="button" class="btn btn-sm btn-primary btn-relative" id="saveCoverage">
                    <span class="t-save icon icon-sm"></span>OK
                </button>
            </div>
        </div>
    </div>
</div>

When I click OK button I call a javascript function that perform an Ajax call to the server.

At that moment the window closes. I need it to remain open to post a message. I also tried to open it again with $('#exampleModal').modal('show'); but the window seems to open and close.

How can I make the window stay open?

This is my javascript function

 function Continue() {
      $.ajax(
      {
          type: "GET",
              data: {id: 123},
          headers: {
          },
          url: '@Url.Action("method", "Controller")',
              success: function (result) {
                  if (result.success) { 
                // do something
                  }
          },
              error: function (req, status, error) {
              }
          });
 }

Answer 1

(This may be a comment instead of an answer but I have not enough reputation yet)

So your problem is that it closes the pop up? After checking your code, maybe this is not the issue but try to stop the bubbling, maybe there is something I cannot see beyond the code you shared.

<button data-bs-toggle="modal" data-bs-target="#PageWaiting" onclick=" Continue(event)" type="button" class="btn btn-sm btn-primary btn-relative" id="saveCoverage">
                <span class="t-save icon icon-sm"></span>OK
            </button>

function Continue(e) {
  $.ajax(
  {
      type: "GET",
          data: {id: 123},
      headers: {
      },
      url: '@Url.Action("method", "Controller")',
          success: function (result) {
              if (result.success) { 
            // do something
              }
      },
          error: function (req, status, error) {
          }
      }); 
e.preventDefault(); 
}