I need to open a modal on another modal, the problem is that the first modal loses the scrool bar of the main page after closing the modal that is on it.
I'll try to explain better:
I have this modal which loads in the modal-body a content that can be extensive coming from a query in Ajax
<div class="modal fade" id="modal_1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Concluir </h4>
</div>
<div id="modal-body" class="modal-body"></div>
</div>
</div>
</div>
I load the information to be displayed in the modal-body in the following Jquery action:
$(document).on('click', '#btn_open_modal1', function (event) {
event.preventDefault();
$.ajax ({
type: 'POST',
url: "load.php",
data: {id : id},
async: false,
dataType: "text",
success: function(data){
$('#modal-body').html(data);
$('#modal_1').modal('show');
}
})
})
In this modal that will open has a button to call another modal
<button class="btn btn-success btn-block" id="confirm">Confirm</button>
In this modal that will open has a button to call another modal clicking this button launches a new Ajax call to open a new modal
<div class="modal fade" id="modal_2">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header text-white bg-dark">Confirm: </div>
<button class="btn btn-secondary btn-no" data-dismiss="modal">No</button>
<a class="btn btn-primary text-white btn-yes" id="btn-yes">Yes</a>
</div>
</div>
</div>
</div>
and in Jquery
$(document).on('click', '#confirm', function(event){
event.preventDefault();
$("#modal_2").modal().find("#btn-yes").off('click').on("click", function(event){
event.preventDefault();
$.ajax ({
type: 'POST',
url: "update.php",
data: {id : id},
dataType: "text",
success: function(data){
$('#modal_2').modal('hide');
}
})
})
})
In this modal that will open has a button to call another modal clicking this button launches a new Ajax call to open a new modal. When I close modal_2, modal_1 loses scrool and it is no longer possible to scroll the page. I skidded a lot about Modal over Modal, but I did not find anything that uses Jquery (Ajax) and that the modal content is large enough to scroll the page and that it is influenced by the modal upper
