- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to customize the position of an alert box using JavaScript?
To customize the position of an alert box, use the CSS “top” and “left” properties. We have a custom alert box, which we’ve created using jQuery and styled with CSS.
Example
You can try to run the following code to customize the position of an alert box −
<!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: 30%; top: 30%; 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><br> <button class="yes">OK</button> </div> <input type="button" value="Click Me" onclick="functionAlert();" /> </body> </html>
- Related Articles
- How to design a custom alert box using JavaScript?
- How to show image in alert box using JavaScript?
- How to call JavaScript function in an alert box?
- How I can change the style of alert box using JavaScript?
- How to change button label in alert box using JavaScript?
- How to center the JavaScript alert message box?
- What is an alert box in JavaScript?
- How to change the color of the alert box in JavaScript?
- How to edit a JavaScript alert box title?
- How to provide new line in JavaScript alert box?
- How to display JavaScript variable value in alert box?
- How to create and apply CSS to JavaScript Alert box?
- How I can show JavaScript alert box in the middle of the screen?
- How I can replace a JavaScript alert pop up with a fancy alert box?
- How I can set the width and height of a JavaScript alert box?

Advertisements