Modal Shows but Won't Hide

Question

I have the following modal on my master page as a loading message with a spinning gif whenever a page is loading.

<div id="divModal" class="modal fade" role="dialog">
        <div id="divModalDialog" class="modal-dialog">
            <div id="divModalContent" class="modal-content" style="text-align: center;">
                <div id="divModalBody" class="modal-body">
                    <img src="/Images/Loading.gif" width="200" alt="Loading..." />
                    <div id="divMessage" style="margin-top: 10px">
                        <b>Please Wait...</b>
                    </div>
                </div>
            </div>
        </div>
    </div>

I'm using the following script to try to show and hide the modal.

<script type="text/javascript">
        function showModal() {
            $('#divModal').modal('show');
        }

        function hideModal() {
            $('#divModal').modal('hide');
        }

        $(document).ready(showModal());
        window.onload = hideModal();
    </script>

Showing the modal in document.ready works fine. But when all the content on the page is finished loading, usually about 5 seconds, I want the modal to go away. From what I've read, putting the hide modal function in window.onload should work, but it doesn't. My modal pops up as soon as the page starts to load, but just keeps spinning indefinitely.

I have both of these functions right before the end of the body, as it seems that's the only place the show modal function will work. I've even put alerts and console logs in each function to make sure they're firing in the correct order, and they are. I get no errors when they fire either. But hide just isn't hiding the modal. Does anyone have any idea why this could be?

EDIT: I've gotten hideModel() to actually hide the model by wrapping it in setTimeout().

window.onload = setTimeout("hideModal()", 1000);

However, it just immediately hides the modal after however long the second parameter is, whether or not the page is finished loading.

what kind of library are you using. jQuery [does not have](https://api.jquery.com/?s=modal) a modal function. what happens if you call showModal() and hideModal() from the console? — htho, Jun 20 '18 at 20:08
I'm using jQuery and Bootstrap. If I use hideModal() from the console, it hides the modal. showModal() also works as it should. — MugenDraco, Jun 20 '18 at 20:23

score 0 · Answer 1 · answered Jun 20 '18 at 20:41

0

To hide bootstrap modal, use $('#divModal').modal('toggle');

answered Jun 20 '18 at 20:41

Vinit Divekar

774
10
24

score 0 · Answer 2 · answered Jul 26 '18 at 15:48

I finally figured out a solution, so hopefully if anyone ever runs across this post, it'll help them. This was something that had been implemented before on another page, but I had to tweak it a little to get it to work correctly.

In the document ready function, I put this for the confirmation button on the modal with the ID btnEditAddress:

$('#' + '<%=btnEditAddress.ClientID%>').attr('onclick',
"$('.modal').modal('hide');setTimeout(function(){" + $(this).prop('href') + "}, 50);");

I am still unsure why none of the other things I tried worked though.

Modal Shows but Won't Hide

2 Answers2