How To Change Position Of Alert Box In Javascript

In this tutorial, we will learn how to change the position of an alert box in Javascript. Changing the position of an alert box can improve the user experience of your webpage, drawing attention to important messages, or placing them in a more convenient location for the user to interact with.

Let’s follow these simple steps to change the position of an alert box in JavaScript.

Step 1: Create the HTML structure

First, create a simple HTML file with a basic structure. It should have a <button> element that triggers the custom alert box when clicked. The HTML code should look like the following:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>Custom Alert Box Position</title>
</head>
<body>
    <button onclick="showAlert()">Show Alert</button>
    <div id="customAlert" class="custom-alert">This is a custom alert!</div>
</body>
</html>

In this example, our button will execute the showAlert() function when clicked, and we have a <div> element with the ID customAlert that represents our custom alert box.

Step 2: Add CSS styles

Next, add some CSS code to style the custom alert box. Specifically, we will set its initial position using the top and left properties. Here’s an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    .custom-alert {
        display: none;
        position: absolute;
        background-color: #f9edbe;
        color: #222;
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #fbeed5;
 
        /* Initial position of the alert box */
        top: 100px;
        left: 100px;
    }
</style>

In this example, we’ve set the custom alert box to have a background color, padding, border-radius, and a border. The most important part for this tutorial is the position property, which is set to absolute and given initial top and left values.

Step 3: Add Javascript functions

Now, we need to add some Javascript code to our page that will display the custom alert box when the user clicks the button. We’ll also include a function to change the position of the alert box.

1
2
3
4
5
6
7
8
9
10
11
12
<script>
function showAlert() {
  var customAlert = document.getElementById("customAlert");
  customAlert.style.display = "block";
}
 
function moveAlertBox(newTop, newLeft) {
  var customAlert = document.getElementById("customAlert");
  customAlert.style.top = newTop + "px";
  customAlert.style.left = newLeft + "px";
}
</script>

In this code, we have created two functions: showAlert() and moveAlertBox(). The showAlert() function simply displays the custom alert box by changing its CSS display property to “block”. The moveAlertBox() function takes two parameters – newTop and newLeft – and sets the custom alert box’s position to those values.

Step 4: Putting it all together

Now, let’s put everything together and create an example that changes the position of the custom alert box based on user input. Add the following code to our existing HTML file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p>Enter new position:</p>
<label for="top">Top: </label>
<input type="number" id="top" value="100">
<label for="left">Left: </label>
<input type="number" id="left" value="100">
<button onclick="changeAlertPosition()">Change Position</button>
 
<script>
function changeAlertPosition() {
  var top = document.getElementById("top").value;
  var left = document.getElementById("left").value;
  moveAlertBox(top, left);
}
</script>

In this example, we’ve added two input fields: one for the new top value and one for the new left value. When the user clicks the “Change Position” button, the changeAlertPosition() function is executed.

This function retrieves the user-provided values for the top and left positions, and uses them to call the moveAlertBox() function. As a result, the custom alert box’s position is changed.

Output

The output of the code should look like this:

When the user clicks the “Show Alert” button, a custom alert box will appear, and when they provide new top and left values and click the “Change Position” button, the alert box will move accordingly.

Conclusion

In this tutorial, we have learned how to change the position of an alert box in Javascript. By following these steps, you can create a custom alert box and move it to a user-specified position for increased user experience and functionality on your web pages.