1
votes

I'm importing Jquery Modal from these two links (js and css)

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

I've added the following html code inside the body

<button onclick="load();" class="btn btn-primary">
  <span class="fa fa-icon fa-filter"></span>
  Filtrar
</button>
<div id="loadingModal" class="" style="display:none">
  Cargando
</div>

and the following is in a js file

function load() {
    openLoadingModal();
    doSomething();
    closeModal();
}

function openLoadingModal(e) {
    $("#loadingModal").modal("show");
    var count = 0;
    var points = "";
    var intervalId = window.setInterval(function(){
        count++;
        $("#loadingModal").text("Cargando" + ".".repeat(count % 3 + 1));

    }, 1000);
    return intervalId;
}

With this, the modal opens as I expect. The thing is that I want to close the modal when this ends. But the solutions I've found didn't work. I tried the following:

    $("#loadingModal").modal("close");
    $("#loadingModal").modal().close();
    $("#loadingModal").modal().close;
    $("#loadingModal").modal("toggle");
    $("#loadingModal").modal().toggle();

None of this closes the modal as it should (maybe hides the modal, but not all of it, since there is a black screen)

I think this shouldn't be this hard, but every link I get in tells me to do one of this

Thanks

1

1 Answers

1
votes

If there is only one modal on the page, use this:

$.modal.close();