I have recently been given the task of updating my company's JavaScript alerts with more customizable bootbox alerts. After playing around with it, I managed to make an alert appear when a button is clicked, but the alert keeps showing up at the bottom of the screen and extends the height of the page.
There is a similar question to mine here: Bootbox alert displaying in the top right, but I've already tried all the solutions mentioned there and experimented with different values myself. One solution suggested was:
.modal-dialog {
left: auto;
}
I noticed that changing the 'left' property affects the popup, but 'top' or 'bottom' do not seem to work. Here is the code snippet I am currently using (excluding includes):
<div>
<button class ="btn btn-danger">Alert Box</button>
</div>
<script type= "text/javascript">
$(document).ready(function (){
$('.btn').on('click', function(){
bootbox.prompt({
title: "This is a prompt, vertically centered!",
centerVertical: true,
callback: function(result){
console.log(result);
}
});
});
});
</script>
The version of my bootbox.min.js is v5.5.2 and bootstrap.min.js is v5.0.2. I did try switching to bootstrap v4.X briefly, but it didn't change anything.
Any help would be greatly appreciated.