Erbi Silva Erbi Silva - 25 days ago 4x
HTML Question

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 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 class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">Submit</button>
<!-- END MODAL -->

When I submit the form, I close the model!

$( '#formUpdateProgress' ).on( 'submit', function(e) {


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


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:


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