I am hiding and showing modal in this sequence:
when I click on import button it will target modal with id="import-actionpopup"
then I have two other button Append, and override when I upload file and select option then this import-actionpopup will be closed and then I have two other modal with id="warningOverrideAction"
which will be openned on overrideButton button click and other modal with id="appendAction"
which will be openned on appendButton click.
Now when I hide my warningOverrideAction or appendAction modal then it automatically adds padding-right:17px; to my body.
When I searched on stackoverflow I found that this is a glitch in bootstrap.css but my problem is that the padding remains even after the modal is hidden.
$(document).ready(function(){
$("#appendButton,#overrideButton").click(function(event){
path=document.getElementById("zapper").value;
if(path){
if($('#hinkSelect option:selected').prop('disabled') == true){
$('#reportError').modal('show');
document.getElementById('uploadError').innerHTML="<center>You have not selected any tool. <br>Make sure to select one tool.</center>";
document.getElementById('error_title').innerHTML="File Upload Error";
}
else{
toolName=document.getElementById('hinkSelect').value;
$('#import-actionpopup').modal('hide');
if(event.target.id==='overrideButton')
$('#warningOverrideAction').modal('show');
else if(event.target.id==='appendButton')
$('#appendAction').modal('show');
document.getElementById('hinkSelect').value='';
}
}
else{
$('#reportError').modal('show');
document.getElementById('uploadError').innerHTML="<center>You have not uploaded a zip file. <br>Make sure to upload a Zip file and try again.</center>";
document.getElementById('error_title').innerHTML="File Upload Error";
}
});
});
function uploadScore(action){
$("#appendAction").modal("hide");
$("#warningOverrideAction").modal("hide");
showPleaseWait();
var baseUrl =url;
$.ajax() calls-->
success: function(dataset){
if(dataset.error!=null){
$("#pleaseWaitDialog").modal("hide");
$('#reportError').modal('show');
document.getElementById('uploadError').innerHTML="<center>"+dataset.error+"</center>";
document.getElementById('error_title').innerHTML="Score Upload Failure";
}
else{
location.reload(true);
}
},
error : function(e){
console.log(e);
}
});
}
function showPleaseWait() {
var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false role="dialog">\<div class="modal-dialog">\<div class="modal-content">\<div class="modal-header" style="background-color:rgba(0,0,0,0.4);">\<h4 class="modal-title" style="color:black">Please wait while we import all your scores details...</h4>\</div>\<div class="modal-body" style="background-color:rgba(0,0,0,0.4);">\<img src="${pageContext.request.contextPath}/resources/images/spinner.gif" style="display: block; margin-left: auto; margin-right: auto;"/>\</div>\</div>\</div>\</div>';
$(document.body).append(modalLoading);
$("#pleaseWaitDialog").modal("show");
}
Please help if there is a workaround
Use css only: if you are using single modal (not using multiple modals, I means not using modal over another modal)
.modal-open{
overflow: auto;
padding-right:0 !important;
}
Use css and jquery script both: if you are using multiple modals, I means using modal over another modal). Note: add jquery script after jquery file
.modal-open{
overflow: auto;
padding-right:0 !important;
}
$(document).on('show.bs.modal', '.modal', function () {
$("body").css("padding-right","0");
});
$(document).on('hide.bs.modal', '.modal', function () {
$("body").css("padding-right","0");
});