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

you need javascript. look for an alert button. – thatidiotguy Feb 14 '13 at 21:44 — thatidiotguy, Feb 14 '13 at 21:44

score 18 · Answer 1 · answered Feb 14 '13 at 21:44

18

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.

answered Feb 14 '13 at 21:44

Adam Plocher

13,994
6
46
79

Thanks, but do you know how to set a title for the alert message box? – Jonathan Gurebo Feb 14 '13 at 22:17
It can't be done with the standard alert box in javascript. You could use a more complex DHTML solution to accomplish something like that. Using something like what "Shanimal" suggested could do that. – Adam Plocher Feb 14 '13 at 22:23

score 4 · Answer 2 · edited May 21 '20 at 14:28

4

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.

edited May 21 '20 at 14:28

Community

1
1

answered Feb 14 '13 at 21:45

Charlie Martin

110,348
25
193
263

Thanks, but do you know how to set a title for the alert message box? – Jonathan Gurebo Feb 14 '13 at 22:16
No, the box you get from alert is defined by the browser. – Charlie Martin Feb 16 '13 at 20:41

Gash · Answer 3 · 2017-01-16T08:27:08.887

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...

Shanimal · Answer 4 · 2013-02-14T22:41:36.337

3

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>

edited Feb 14 '13 at 22:41

answered Feb 14 '13 at 21:52

Shanimal

11,517
7
63
76

Thanks, but do you know how to set a title for the alert message box? – Jonathan Gurebo Feb 14 '13 at 22:22
Keep in mind, with this solution you need to include the JQuery, JQuery UI, and JQuery UI Theme on your page. It is far more complicated than using a simple Javascript alert box, but you should be able to at least change the title (and of course it looks really cool). – Adam Plocher Feb 14 '13 at 22:25
There are other libraries as well besides jqueryui – Shanimal Feb 14 '13 at 22:26
Heres the documentation for http://jqueryui.com/dialog Also don't forget you can use cdnjs or some other CDN for jqueryui code and css – Shanimal Feb 14 '13 at 22:26
I updated the codepen and the code above to include the title – Shanimal Feb 14 '13 at 22:29

score 2 · Answer 5 · answered Jan 09 '16 at 08:16

For making alert just put below javascript code in footer.

<script> 
 $(document).ready(function(){
    alert('Hi');
 });
</script>

You need to also load jquery min file. Please insert this script in header.

<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.0.min.js'></script>

score 1 · Answer 6 · edited May 27 '16 at 11:07

1

<script type="text/javascript">
    window.alert("My name is George. Welcome!")
</script>

edited May 27 '16 at 11:07

Francisco Romero

12,787
22
92
167

answered May 27 '16 at 10:30

vikas awasthi

11
2

score 0 · Answer 7 · edited Aug 06 '15 at 11:50

0

<script> 
    $(document).ready(function(){
        alert('Hi');
    });
</script>

edited Aug 06 '15 at 11:50

The_Black_Smurf

5,178
14
52
78

answered Aug 06 '15 at 11:15

user5197904

19

score 0 · Answer 8 · answered May 16 '18 at 10:49

0

You can try this.

$(document).ready(function(){      
  alert();
     $('#rep‌ortVariablesTable tbody').append( '<tr><td>lll</td><td>lll</td></tr>');
});

answered May 16 '18 at 10:49

Vi J

39
1
8

HTML - Alert Box when loading page

8 Answers8