Link to home
Create AccountLog in
Avatar of Steve Sperber
Steve SperberFlag for United States of America

asked on

In the Edge browser, how to position Javascript alert message in the center?

In the Edge browser, how to position Javascript alert message in the center? 

Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

..how to position Javascript alert message in the center?  


The alert() method in JavaScript is a built-in function that displays a modal dialog box with a message and an OK button. Unfortunately, there is no built-in way to position the alert message box in the center of the screen.


However, you can use a custom alert box created using HTML, CSS, and JavaScript, which can be positioned in the center of the screen. 


Example:

<!DOCTYPE html>
<html>
<head>
   <title>Custom Alert Box</title>
   <style>
      .modal {
         display: none;
         position: fixed;
         z-index: 1;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         overflow: auto;
         background-color: rgba(0, 0, 0, 0.4);
      }


      .modal-content {
         background-color: #fefefe;
         margin: 15% auto;
         padding: 20px;
         border: 1px solid #888;
         width: 80%;
            height:50%;
         max-width: 500px;
      }


      .close {
         color: #aaa;
         float: right;
         font-size: 28px;
         font-weight: bold;
      }


      .close:hover,
      .close:focus {
         color: black;
         text-decoration: none;
         cursor: pointer;
      }
   </style>
</head>
<body>


   <button onclick="showAlert()">Show Alert Box</button>


   <div id="myModal" class="modal">
      <div class="modal-content">
         <span class="close">&times;</span>
         <p>Your custom alert box message</p>
         <p>Click the button to close.</p>
      </div>
   </div>


   <script>
      function showAlert() {
         var modal = document.getElementById("myModal");
         modal.style.display = "block";


         var span = document.getElementsByClassName("close")[0];
         span.onclick = function() {
            modal.style.display = "none";
         }


         window.onclick = function(event) {
            if (event.target == modal) {
               modal.style.display = "none";
            }
         }
      }
   </script>


</body>
</html>

Open in new window

 

In this example, I create a custom alert box using HTML and CSS, and show it using the showAlert() function in JavaScript. The CSS styles position the modal in the center of the screen using the margin property, and the JavaScript code sets the display property of the modal to "block" to show it and "none" to hide it when the close button or the background is clicked.


This is just an example, and you can modify the HTML, CSS, and JavaScript code to suit your needs.


More information:

https://www.tutorialspoint.com/How-to-center-the-JavaScript-alert-message-box


Avatar of Steve Sperber

ASKER

In this custom message the Yes, No, Cancel Button is not there and the user should not be able to click outside the message box unless he clicks yes or no or cancel.
ASKER CERTIFIED SOLUTION
Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account