Modal window blocks my page

Question

I have a modal window but when I close the modal my page is blocked. I can not do anything. I need to refresh the page to get everything working again! The strange is that sometimes everything works well or sometimes everything is blocked!

The button that opens the model:

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalCode">Approve</button>

My modal window code:

<!-- Modal-->
<div class="modal fade" id="myModalCode" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <form id="formUpdateProgress" >
                {!! csrf_field() !!}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Complaint Progress</h4>
                </div>
                <div class="modal-body">
                    <label class="control-label">Insert code:</label>
                    <div id='complaintProgress' style="position: relative;">
                        <input type="text" name="code" id="code" placeholder="Insert the code here">
                    </div>                   
                </div>
                <div class="modal-footer">                              
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </form> 
        </div>
    </div>
</div>
<!-- END MODAL -->

When I submit the form, I close the model!

$( '#formUpdateProgress' ).on( 'submit', function(e) {
    $('#myModalCode').modal('hide');
});

EXAMPLE:

Modal window in my application:

Then I click Submit, everything works ok, the document is approved but something is locking the page:

Any idea why the page is blocked? Thanks in advance

That transparent black is probably a div that you do not remove with the modal. — Mihailo, Sep 28 '16 at 15:38
The whole point of a **modal** window is that it blocks other activity. https://en.wikipedia.org/wiki/Modal_window — Ouroborus, Sep 28 '16 at 15:59

score 2 · Accepted Answer · edited May 23 '17 at 12:19

Similar issues is discussed in here:

How to hide Bootstrap modal from javascript?

Seems that you have some issues in the way how your modal is handling the submit. Perhaps the easiest fix would be as was mentioned in one of the comments from the link above, add the following fix to remove the backdrop:

$('.modal-backdrop').hide();

Alternatively, you may even remove() it. I'd think, modal will re-create it again, if open.

score 1 · Answer 2 · answered Sep 28 '16 at 15:56

1

It's looks like you are using bootstrap modal. Bootstrap open not only modal, but page mask too. So you need to call bootstrap method to close. With code inspector you can find that body got class="modal-open" and extra div with "modal-backdrop fade in"

Just use <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> or yr element with 'data-dismiss="modal"' and all be ok)

answered Sep 28 '16 at 15:56

Pavel

11
2

thanks for the answer but I was really missing this: $('.modal-backdrop').hide(); – Erbi Silva Sep 28 '16 at 16:01

score 0 · Answer 3 · answered Sep 28 '16 at 16:01

0

    function closeModal(name){
         $("#"+name).modal('hide');
         // I added the next line
         $('.modal-backdrop').hide();
    }

After I add the $('.modal-backdrop').hide(); everything its ok :)

answered Sep 28 '16 at 16:01

Erbi Silva

495
1
8
19

Modal window blocks my page

3 Answers3