mickeymouse Posted January 16 Share Posted January 16 See my alert message in my code below. Thank you. function getnxt() {alert('For this message / alert box, is there a way of 1-Setting the font size, color and alignment (e.g., center)? 2-Eliminating the resulting top heading (name of website) or replacing it? 3-Starting a new line?'); return false;} Link to comment Share on other sites More sharing options...
Ingolme Posted January 20 Share Posted January 20 You can start a new line by putting "\n" in the string. There's no other way to format the alert() box. What web developers do is create an HTML element which looks like a box and use Javascript to make it appear. Here's a simple example: <style> #alert-box { background: #FFF; border-radius: 12px; padding: 12px; box-shadow: 6px 6px 12px rgba(0, 0, 0, 40%); width: 480px; max-width: 95%; position: fixed; top: 40px; left: 50%; border: 1px solid #EEE; transform: translateX(-50%); } #alert-box .buttons { text-align: right; } #alert-box button { appearance: none; display: inline-block; padding: 8px; background: #0078d4; color: #FFF; text-align: center; min-width: 80px; border-radius: 6px; border-width: 0; } #alert-box button:hover { background: #3fa8f8; } </style> <button id="show-alert"> Show alert </button> <div id="alert-box"> <div class="text"> <p>For this message / alert box, is there a way of</p> <ol> <li>Setting the font size, color and alignment (e.g., center)?</li> <li>Eliminating the resulting top heading (name of website) or replacing it?</li> <li>Starting a new line?</li> </ol> </div> <div class="buttons"> <button id="close-alert">OK</button> </div> </div> <script> let box = document.getElementById("alert-box"); box.style.display = "none"; let closeButton = box.querySelector("button"); closeButton.addEventListener("click", e => { box.style.display = "none"; }); let showButton = document.getElementById("show-alert"); showButton.addEventListener("click", showAlert); function showAlert() { box.style.display = ""; } </script> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now