CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapbootstrap-modal
Erbi Silva
Erbi Silva

Reputation: 553

Modal window blocks my page

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: Modal window example

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

Any idea why the page is blocked? Thanks in advance

Upvotes: 0

Views: 3144

Answers (3)

Erbi Silva
Erbi Silva

Reputation: 553

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

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

Upvotes: 0

Pavel
Pavel

Reputation: 11

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)

Upvotes: 1

Vladimir M
Vladimir M

Reputation: 4489

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.

Upvotes: 2

Related Questions