HTML - Alert Box when loading page

Question

i'm using HTML code and i wan't to show un Alert Message or alert box, i don't know what it is called, but a message with a "OK" button.

i want to show this alert when the page is loaded.

How do i do this?

And how to do this with a title in the Alert box?

Do I need JavaScript? if no, How to do this without javascript?

Jonathan

Answer 1

Yes you need javascript. The simplest way is to just put this at the bottom of your HTML page:

<script type="text/javascript">
alert("Hello world");
</script>

There are more preferred methods, like using jQuery's ready function, but this method will work.

Answer 2

You can use a variety of methods, one uses Javascript window.onload function in a simple function call from a script or from the body as in the solutions above, you can also use jQuery to do this but its just a modification of Javascript...Just add Jquery to your header by pasting

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

to your head section and open another script tag where you display the alert when the DOM is ready i.e. `

<script>
    $("document").ready( function () {
        alert("Hello, world");
    }); 
</script>

`

This uses Jquery to run the function but since jQuery is a Javascript framework it contains Javascript code hence the Javascript alert function..hope this helps...

Answer 3

you need a tiny bit of Javascript.

<script type="text/javascript">
window.onload = function(){ 
                alert("Hi there");
                }
</script>

This is only slightly different from Adam's answer. The effective difference is that this one alerts when the browser considers the page fully loaded, while Adam's alerts when the browser scans part the <script> tag in the text. The difference is with, for example, images, which may continue loading in parallel for a while.

Answer 4

If you use jqueryui (or another toolset) this is the way you do it

http://codepen.io/anon/pen/jeLhJ

html

<div id="hw" title="Empty the recycle bin?">The new way</div>

javascript

$('#hw').dialog({
    close:function(){
        alert('the old way')
    }
})

UPDATE : how to include jqueryui by pointing to cdn

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>