Quick Reach
- 1 jQuery Alerts
- 2 Watch this alerts tutorial for quick idea
- 3 The jquery.dialog.js plug-in
- 4 Setting up the plug-in for creating alerts
- 5 A demo of simple alert
- 6 A demo of prompt alert
- 7 A demo of confirm alert
- 8 Example 1: Basic jQuery Alert Box
- 9 Example 2: Confirmation jQuery Alert Box
- 10 Example 3: Prompt Alert Box
- 11 Example 4: Including HTML elements into jQuery alerts
- 12 Related
jQuery Alerts
Alerts or dialogue boxes are widely used these days, in order to interact with the visitors of websites. For example, filling an online form or Alerting before exiting to another page. The jQuery provides ways to make fancy alert boxes to be used for a website.
Watch this alerts tutorial for quick idea
This chapter will take you through how you can use jQuery to design custom alert boxes that you can use for different purposes in your website.
The jquery.dialog.js plug-in
The jquery.dialog.js plug-in can be used for creating the simple, confirm and prompt alerts as the replacement of the default browser alerts.
For creating the jQuery alerts based on this plug-in, you need to include the JS and CSS files that come with this plug-in.
Demo1 Demo2 Demo3
Setting up the plug-in for creating alerts
Include the JS and CSS files after downloading the plug-in here.
<link rel=”stylesheet” href=”css/jquery.dialog/jquery.dialog.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>
<script src=”js/jquery.dialog/jquery.dialog.min.js”></script>
Make sure including the JS file after the reference of the jQuery library. Also, adjust the path for referring the files according to your directory structure.
Use the JavaScript for triggering the required alert as shown in the demos below with complete code.
Developer page
A demo of simple alert
In this example, a simple alert is triggered as you click the text “Click here for simple alert”. The alert only displays a simple message and the user may close this by pressing the “Close” or any given text in the button. Have a look:
See online demo and code
The script:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<script>
$(“#demo-simple-alert”).click(function(){
dialog.alert({
title: “A demo of Alert”,
message: “This is a demo of simple alert with a message!”,
button: “Close”,
animation: “fade”,
callback: function(value){
console.log(value);
}
});
return false;
});
</script>
|
The simple markup:
|
1
|
<a id=“demo-simple-alert” href=“#”>Click here for simple alert</a>
|
The ID of the <a> tag is used in the script for triggering the simple alert. You may use a button or other element for triggering the alert.
A demo of prompt alert
The prompt alert can be displayed by using the prompt function that will replace the default prompt functionality. You may specify the text field like a password field for entering the value. After the value is entered, the user may press the button to proceed:
See online demo and code
The script:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
$(“#demo-prompt-alert”).click(function(){
dialog.prompt({
title: “Prompt Demo”,
message: “Prompt alert example.”,
button: “Proceed”,
required: true,
position: “absolute”,
animation: “scale”,
input: {
type: “password”,
placeholder: “Enter the password here”
},
validate: function(value){
if( $.trim(value) === “” ){
return false;
}
},
callback: function(value){
console.log(value);
}
});
return false;
})
|
You can see, by using different options, you may customize the prompt alert. For example, for replacing the text of the button from “proceed” to some other, use the button option. Similarly, use the message option for displaying the text for the prompt alert.
A demo of confirm alert
In this example a confirm alert by using jQuery is displayed. A user has two choices e.g. Agree or Don’t agree, Ok or Cancel, Yes or No etc. You may perform different actions depending on the user’s selection:
See online demo and code
The code:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
$(“#demo-confirm-alert”).click(function(){
dialog.confirm({
title: “Confirm example”,
message: “A confirm alert demo.”,
cancel: “Don’t Agree”,
button: “Agree”,
required: true,
callback: function(value){
console.log(value);
}
});
return false;
});
|
Learn more about the available options by visiting the developer page.
In the following section, you can see another plug-in for creating the alerts based on jQuery.
You can see alert box codes below or download the required files to your computer and then copy HTML code to run it from your computer.
Download four dependency files here
You have to place all 4 files included in downloaded zip file to the same location as your code file is for below examples.
Example 1: Basic jQuery Alert Box
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<head>
<title>Examples of using jQuery Alerts</title>
<script src=“jquery.js” type=“text/javascript”></script>
<script src=“jquery.ui.draggable.js” type=“text/javascript”></script>
<script src=“jquery.alerts.js” type=“text/javascript”></script>
<link href=“jquery.alerts.css” rel=“stylesheet” type=“text/css” media=“screen” />
<!– Example script –>
<script type=“text/javascript”>
$(document).ready( function() {
$(“#basic_button”).click( function() {
jAlert(‘Example of a basic alert box in jquery’, ‘jquery basic alert box’);
});
});
</script>
</head>
<body>
<p>
<input id=“basic_button” type=“button” value=“Show Basic Alert” />
</p>
</body>
</html>
|
Example 2: Confirmation jQuery Alert Box
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!DOCTYPE html>
<head>
<title>Examples of using jQuery Alerts</title>
<script src=“jquery.js” type=“text/javascript”></script>
<script src=“jquery.ui.draggable.js” type=“text/javascript”></script>
<script src=“jquery.alerts.js” type=“text/javascript”></script>
<link href=“jquery.alerts.css” rel=“stylesheet” type=“text/css” media=“screen” />
<!– Example script –>
<script type=“text/javascript”>
$(document).ready( function() {
$(“#confirm_box”).click( function() {
jConfirm(‘Please confirm this?’, ‘Confirmation Dialog’, function(r) {
jAlert(‘Click Result: ‘ + r, ‘Visitor Response’);
});
});
});
</script>
</head>
<body>
<p>
<input id=“confirm_box” type=“button” value=“Show jquery confirm alert” />
</p>
</body>
</html>
|
Example 3: Prompt Alert Box
This can be used for scenarios where you need user input values, for example, Your Name or age or location before proceeding to next step.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<head>
<title>Examples of using jQuery Alerts</title>
<script src=“jquery.js” type=“text/javascript”></script>
<script src=“jquery.ui.draggable.js” type=“text/javascript”></script>
<script src=“jquery.alerts.js” type=“text/javascript”></script>
<link href=“jquery.alerts.css” rel=“stylesheet” type=“text/css” media=“screen” />
<!– Example script –>
<script type=“text/javascript”>
$(document).ready( function() {
$(“#prompt_alert”).click( function() {
jPrompt(‘Your Name:’, ‘Type name here’, ‘What is your name?’, function(r) {
if( r ) alert(‘You name is: ‘ + r);
});
});
});
</script>
</head>
<body>
<p>
<input id=“prompt_alert” type=“button” value=“Prompt Alert” />
</p>
</body>
</html>
|
Example 4: Including HTML elements into jQuery alerts
You can include HTML attributes like bold, italic, underline even links <a> into your alert boxes to make it more interactive and appealing. Below example shows how to include bold, italic underline and a hypertext <a> elements into jquery alert.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<head>
<title>Examples of using jQuery Alerts</title>
<script src=“jquery.js” type=“text/javascript”></script>
<script src=“jquery.ui.draggable.js” type=“text/javascript”></script>
<script src=“jquery.alerts.js” type=“text/javascript”></script>
<link href=“jquery.alerts.css” rel=“stylesheet” type=“text/css” media=“screen” />
<!– Example script –>
<script type=“text/javascript”>
$(document).ready( function() {
$(“#alert_html”).click( function() {
jAlert(‘HTML attributes , such as <strong>bold</strong>, <em>italics</em>, and <u>underline</u>! <a href=”http://www.google.com”>your site</a>’);
});
});
</script>
</head>
<body>
<p>
<input id=“alert_html” type=“button” value=“Show HTML included Alert” />
</p>
</body>
</html>
|
Leave A Comment?