I have a Bootstrap 3 modal that will close and return my page to the proper state (which is showing a vertical scroll bar) when I close it with the 'close button' or the 'x' in the top right corner. However when I attempt to have a "select button" in the modal close it after making an ajax call the vertical scroll bar does not return to the page. In the code I have the 'onclick' event calling .modal('hide') as well as having: data-dismiss="modal" on the button itself. The ajax call executes correctly as well. I can't see why this is preventing the scroll bar from reappearing in the same manner as when one of the close buttons is selected.
--Thank you for your insights.
<div class="modal fade" id="modal_1timepmt" tabindex="-1" role="dialog" aria-labelledby="1timepmtLabel" aria-hidden="true">
<div class="modal-dialog admin_modal_dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Some Other Details</h4>
</div>
<div class="modal-body">
<div class="container content-box live-box">
<h3>Some Heading Here</h3>
<form id="date_exp" name="date_exp">
<div class="form-group" id="exp_form">
<label for="log_start" class="control-label"><small>Date</small></label>
<input type="date" class="form-control input-sm" name="exp_date" id="exp_date" data-format="yyyy-mm-dd" >
<a href="/?object=result_detail&action=exp_date" onclick="priv_ajax.go({
url:this.href,
div:'web_adm_details',
data:priv_forms.capture(document.forms['date_exp'])
}); return false; $('#modal_1timepmt').modal('hide');" >
<button style="margin-left: 10px; margin-top: 10px;" class="btn btn-default btn-xs" data-dismiss="modal">Select</button></a>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
To help anyone else who may run into this. Upon further inspection of the DOM after the modal closed I noticed that body still had this class applied: ".modal-open".
Removal of this class would bring the page back to normal conditions. The following simple line of code attached to the onclick event solved this issue (although I still haven't figured out the underlying cause).
$('body').removeClass('modal-open');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With