Last Updated on April 4, 2021 by Roshan Parihar
In this tutorial, learn how to create or add a jQuery alert message box in HTML content. The short answer is to use the jQuery alert() and pass the content as the argument to display on alert.
jQuery offers many useful functions to use and perform various useful tasks for your application. The jQuery alert message is one of the best ways to display notifications to users. While writing any code, you have to use alert messages on the click of the button or occurring of some event.
What is jQuery Alert Message Box?
An alert message is a notification or information that you can provide to the users on occurring of some event. It is a message box of browser-defined default size which comes on click of some button or opening of a page. When someone submitting a form or going from one page to another page you bother to display an alert box.
Below is the simple alert box that displays when someone clicks on a button. You can click the below button to see the alert message box.
Click this button to see the alert message now.
You can use an alert message box to display a warning, success, or informational messages to the users who come to your web page.
How to Write and Create jQuery Alert Message Box
To write alert messages box to display important notifications to users, you have to use the jQuery alert(). It depends upon you which occurrence of the event, you want to show the alert messages box.
Syntax
|
1 |
alert(content) |
The content parameter requires any text content you want to show in the alert message box.
|
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $("#btn-alert").click(function(){ alert("Hello World! Welcome to Tutorialdeep."); }); }); </script> <button id="btn-alert" class="btn btn-primary">Alert me!</button> |
Output
How to Add Line Break in Message Content
When you write any content to the alert function, it displays the content without any line break. To put the line break inside the content of the alert message, you have to use the symbol \n at the place of the breakpoint.
You can use the symbol multiple times to put the line break. If you put \n for a single time, you will get a single line break. But, if you use it multiple times you will get multiple line breaks.
|
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $("#btn-alertbreak").click(function(){ alert("Hello World! \n Welcome to Tutorialdeep."); }); }); </script> <button id="btn-alertbreak" class="btn btn-primary">Alert me!</button> |
Output
In the above example, you will get a single line break just because you have used single \n symbol inside the alert content.
You must also read.
- How to Write Javascript Dialog Box to Get User Confirmation
- jQuery Add Line Breaks in Alert Message Box for New Line
References