Whenever a jQuery confirm dialog is displayed, the scroll bar on the page disappears, causing the page to suddenly shift to the right. Here is the JavaScript code for the dialogue:
<script src="vendor/jquery-confirm.min.js"></script>
<link href="vendor/jquery-confirm.min.css" rel="stylesheet" type="text/css">
<script>
function confirmDialog(content, func, parameter) {
$.confirm({
title: "",
content: content,
confirmButton: "Yes",
cancelButton: "No",
theme: "black",
confirm: function() { func(parameter); },
cancel: function() { }
});
}
</script>
I have applied this CSS style:
body {
overflow-y: scroll;
}
How can I prevent this unwanted behavior from occurring?
Update
I attempted to use "!important", but when I inspected the page in Firefox, I noticed that this CSS rule was overriding it:
body.jconfirm-noscroll {
overflow: hidden !important;
}
Additionally, there is a strikethrough on the following line of CSS:
overflow-y: scroll !important;