How to center the JavaScript alert message box?

Front End Technology Javascript Web Development

BACK-END web Development with php & MySQL

Harshit Srivastava

More Detail

The Complete Front-End Web Development Course!

Joseph Delgadillo

More Detail

Front End & Fullstack - React 16.8 +

Best Seller

Sandra L

More Detail

In this tutorial, we will learn to center the JavaScript alert box. In JavaScript, an alert box is useful to show users some message, information, warning, success, etc. Let’s understand it by real-world example when you open any website on the web browser and start to authenticate by entering your username and password. When you click the submit button, it gives a message in an alert box like the password should of be 8 or more characters, or sign in successfully.

Users can create the alert box using JavaScript's alert() method. Unfortunately, the default alert box doesn’t allow us to make changes to that. So, we will create the custom alert box using JQuery and set its position so that it appears in the center of the browser window.

Creating the Custom Alert Box

In this approach, we will use the jQuery dialog() method. The jQuery dialog box works the same as the alert box. We can create the custom div and add content for the alert box into the div.

After that, we can simply access the div in JavaScript using id, class name, or either way and call the dialog method for that div element. Now, div can be opened as the alert box, which contains the close button at the top right corner.

The benefit of using the dialog() method is that it popup the div in the center of the screen. So, the programmer doesn’t need to add extra CSS to center the alert box.

Syntax

Users can follow the below syntax to use the JQuery dialog() box to make the custom div to alert box.

<div id = "alertWindow" title = "Alert Box">

// content of the alert box
</div>
<script>

   // open the imgInDialog div in the dialog box.
   $(function () {

      // making alert window div to dialog box 
      $(" #div_id ").dialog();
   });
</script>

Example 1

Creating Custom Alert Box Using jQuery Dialog

In the below example, we have created the div with the id called ‘alertWindow’ and added welcome messages. We will access the div by id and apply the dialog() method. Also, we have set the title attribute for the alert div, which will appear as the title of the alert box. Also, we have added the jQuery CDN in the <head> to invoke the dialog() method.

The dialog box will appear at the browser window's center when the user reloads the web page.


<html>
<head>
<!-- jQuery CDN for dialog boxes -->
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"> </script>
<!-- CSS -->
<style>
   .ui-widget-header {
      background: lightgreen;
      color: blue;
      font-size: 20px;
   }
   #dialog {
      text-align: center;
   }
</style>
</head>
<body>
   <h2> Center the JavaScript alert box. </h2>
   <h4> Creating custom alert box using <i> JQuery </i> and set it to center. </h4>
   <!-- content of the dialog box. -->
   <div id = "alertWindow" title = "Alert Box">
   <p> Welcome to the tutorialsPoint! </p>
   <p> Alert box into the center. </p>
   </div>
   <script>
      // open the imgInDialog div in the dialog box.
      $(function () {
         $("#alertWindow").dialog();
      });
   </script>
</body>
</html>

Example 2

Center the Alert Message Box Using CSS

In the below example, we create a custom alert box to center the JavaScript alert box. Under that, style it accordingly and position it to the center. Use the “top” and “left” CSS properties to achieve this. Set them as 50%, but as you can see the button below, so the property to 40% for correct alignment.


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
   function functionAlert(msg, myYes) {
      var confirmBox = $("#confirm");
      confirmBox.find(".message").text(msg);
      confirmBox.find(".yes").unbind().click(function() {
         confirmBox.hide();
      });
      confirmBox.find(".yes").click(myYes);
      confirmBox.show();
   }
   </script>
   <style>
      #confirm {
         display: none;
         background-color: #F3F5F6;
         color: #000000;
         border: 1px solid #aaa;
         position: fixed;
         width: 300px;
         height: 100px;
         left: 50%;
         margin-left: -100px;
         padding: 10px 20px 10px;
         box-sizing: border-box;
         text-align: center;
      }
      #confirm button {
         background-color: #FFFFFF;
         display: inline-block;
         border-radius: 12px;
         border: 4px solid #aaa;
         padding: 5px;
         text-align: center;
         width: 60px;
         cursor: pointer;
      }
      #confirm .message {
         text-align: left;
      }
   </style>
</head>
<body>
   <div id="confirm">
   <div class="message">This is a warning message.</div>
      <button class="yes">OK</button>
   </div>
   <input type="button" value="Click Me" onclick="functionAlert();" />
</body>
</html>

We have learned to create the custom alert box using the JQuery dialog() method. However, users can create the alert box from scratch using the JQuery or vanilla JavaScript without using the dialog() method. But it will take more effort, and users need to set the positioning and style for the alert box.