Modal Closes, but the scrollbar does not return

I have a Bootstrap 3 mod that will close and return my page to the correct state (which shows a vertical scroll bar) when I close it using the close or x button in the upper right corner. However, when I try to “select a button” in modal closure, after making an ajax call, the vertical scroll bar does not return to the page. In the code, I have an onclick event that fires .modal ('hide'), as well as the presence of: data-reject = "modal" on the button itself. The correct ajax call is also made. I don’t understand why this prevents the scrollbar from reappearing the same way as when choosing one of the close buttons.

- Thank you for understanding.

<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">&times;</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>

+4
3

- , . DOM , : ".modal-open".

. , onclick, ( ).

$('body').removeClass('modal-open');
+15

, css . CSS

.modal.fade.in {overflow-x:hidden; overflow-y:auto;}

.

PS: , , , , ( javascript data-dismiss="modal", , data-toggle="modal" , class="modal-open" . bootstrap CSS

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

javascript, , , - java.:)

0

Maybe the modal popup is not closed properly.

Code to hide modal popup

$("#ModalId").modal("hide");
0
source

Source: https://habr.com/ru/post/1545146/


All Articles