Good day, I am trying to display the data returned in my json response to the user using bootbox alert. However, the modal window is popping up in the top right corner of the screen and not centered. Any help? Please not that my master page has the reference to jquery and bootstrap.
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/DataTables/dataTables.bootstrap.min.js"></script>
<script src="~/Scripts/bootbox.min.js"></script>
<script>
$(document).ready(function () {
$('.page-wrapper').css("background-color", "");
$("#divProcessing").hide();
$('form').on('submit', function (e) {
e.preventDefault();
$('body .page-wrapper').css("background-color", "rgba(0,0,0,0.5)");
$("#divProcessing").show();
$.ajax({
url: "/BulkEmail/UploadEmailList",
type: this.method,
data: new FormData(this),
cache: false,
contentType: false,
processData: false,
success: function (data) {
if (data.isValid) {
bootbox.alert(data.error);
}
else
{
bootbox.alert('It worked');
}
$('body .page-wrapper').css("background-color", "");
$("#divProcessing").hide();
},
error: function (xhr, error, status) {
$('body .page-wrapper').css("background-color", "");
$("#divProcessing").hide();
bootbox.alert(status);
console.log(error, status);
}
});
});
});
</script>
It may be due to the styles in .page-wrapper. Check the css for that. I transform my modals so they're directly in the center of the screen. By default, they should appear centered from the top. If you want to center them in the screen try the following:
.modal{
top: 50%;
bottom: 50%;
transform: translate(-50%, -50%);
position: absolute;
z-index: 1040;
}