how to make the alert box that doesnt cover the webage content

0 ben C · June 21, 2014
Hi, i am trying to inform the customer that the store will be temporary closed during a specific time. so i use the traditional alert code

    alert("blah blah blah");


but the problem is when i go to the website, this pops up and the background is gray or white, depends on the browser. the webpage shows only after the user click OK. how can you make the box pops up after the webpage is loaded? i tried putting the alert code in the body  tag, but still when it pops up, it still covers the whole webpage content with gray background.

how can i make it looks like this? it shows the box and the website content in the back.

Post a Reply


Oldest  Newest  Rating
+4 Samuel Oloruntoba · June 22, 2014
well what i would suggest is that you put that script tag containing the alert as the last tag before the closing body tag, or simply do this if you are using jquery

<!--?prettify lang=html linenums=true?-->
$(document).ready(function(){    alert(message_for_user);});

another jquery use case

<!--?prettify lang=html linenums=true?-->
$(window).load(function(){    alert(message_for_user);});

and if you prefer native javascript with no libraries, then you can use the below steps to make the alert work properly

<!--?prettify lang=html linenums=true?-->
if( document.readyState === "complete" ) {   alert(message_for_user);}

or you can try this

<!--?prettify lang=html linenums=true?-->
window.onload = function() {    alert(message_for_user);};

also there is this

<!--?prettify lang=html linenums=true?-->
function sayAlert() {    alert(message_for_user);}if( document.addEventListener ) {    document.addEventListener('DOMContentLoaded', sayAlert, false);} else {    document.attachEvent('onDOMContentLoaded', sayAlert);}

what all of the above functions do, is that they wait and when the DOM has fully loaded, before showing the alert message box to the user. Hope i helped
0 ben C · June 22, 2014
thanks guys. i really appreciate it.
  • 1



A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.