This can be done relatively easy, without too much code, and with the feature of fading in/out. The below example fades in and out at a rate of 3 seconds per fade, but this can be changed by modifying the fadetime variable and the 3s parameter of the CSS definition transition: opacity 3s;.
Besides the ability to have fading, the advantage of this answer is that it should be extremely easy to use when making a really customized version. This solution does not emphasize CSS or styling, I hope it emphasizes the functionality desired.
const fadetime = 3000;document.addEventListener("DOMContentLoaded", function(event) { document.getElementById('message-box-creator').addEventListener('click', function(ev) { document.body.classList.add('disabled-body'); fadeInElement(document.getElementById('message-box')); }); document.getElementById('close-message-box').addEventListener('click', function(event) { document.body.classList.remove('disabled-body'); fadeOutElement(document.getElementById('message-box')); }); // Fading // ------------------------------------------------- function fadeInElement(element) { element.style.removeProperty('display'); setTimeout(function() { element.classList.remove('fade'); }, 10); return true; } function fadeOutElement(element) { element.classList.add('fade'); setTimeout(function() { element.style.display = 'none'; }, fadetime); return true; }});#message-box { top:2%; left:10%; width:80%; border: 1px solid black; background-color:#FFFFFF; position:absolute; z-index:10000;}.disabled-body { background-color: rgba(0,0,0,0.5);}.fadeable { opacity: 1; transition: opacity 3s;}.fade { opacity: 0 !important;}<body><div id="message-box" class="fadeable fade" style="display:none;"><b>Note:</b> Message-box has been activated!<br><br><button id="close-message-box">Close</button></div><button id="message-box-creator">Create Alert</button></body>Bonus: A function for disabling buttons on the page when doing an alert:
function disableAllButtons() { const buttons = document.getElementsByTagName('button'); for (const button of buttons) { button.disabled = true; } document.getElementById('close-message-box').disabled = false; return true;}Run this function within the event listener for displaying the message (and the reverse for clicking close), do the same for input and submit, and you should have a fully disabled page.