Colors in javascript alert

How TO — Alerts

Alert messages can be used to notify the user about something special: danger, success, information or warning.

Create An Alert Message

Step 1) Add HTML:

Example

If you want the ability to close the alert message, add a element with an onclick attribute that says «when you click on me, hide my parent element» — which is the container (class=»alert»).

Tip: Use the HTML entity » × » to create the letter «x».

Step 2) Add CSS:

Style the alert box and the close button:

Example

/* The alert message box */
.alert padding: 20px;
background-color: #f44336; /* Red */
color: white;
margin-bottom: 15px;
>

/* The close button */
.closebtn margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
>

/* When moving the mouse over the close button */
.closebtn:hover color: black;
>

Many Alerts

If you have many alert messages on a page, you can add the following script to close different alerts without using the onclick attribute on each element.

And, if you want the alerts to slowly fade out when you click on them, add opacity and transition to the alert class:

Example

// Get all elements with >var close = document.getElementsByClassName(«closebtn»);
var i;

// Loop through all close buttons
for (i = 0; i < close.length; i++) // When someone clicks on a close button
close[i].onclick = function()

// Get the parent of var div = this.parentElement;

// Set the opacity of div to 0 (transparent)
div.style.opacity = «0»;

// Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
setTimeout(function()< div.style.display = "none"; >, 600);
>
>

Tip: Also check out Notes.

Источник

Change alert message text color using javascript

Solution 1: What you could do is create a div (with your id) and change appearance based on the input by using css classes. The div with id ‘alert’ never changes, except for the classes, which you define in your javascript.

Why don’t my alert message and background color change execute simultaneously?

There are actually two things going on here. As noted in the comments, Javascript is single-threaded and an alert box waits for your click before executing the next instruction. In your case, one possibility would be to simply change the color before showing the alert box:

 //CHANGE THE COLOR BEFORE ALERTING document.body.style.backgroundColor = guessedColor; return alert("Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background."); 

But there is also something else going on here. It looks like even if you fire off the command to change the background color first, the alert box gets fired off before the instruction (to change the color) finishes. An alert box stops the thread in the browser, and that must include the color change instruction as well. I’m not sure if this is a bug or not. And I’ve only tried it in Chrome, so I’m not sure about other browsers.

One way you can get around this is to put your alert box on a delayed timer, like this:

 document.body.style.backgroundColor = guessedColor; var alertMsg = "Congratulations! You have guessed the color!\n\nIt took you " + guesses + " guesses to finish the game.\n\nYou can see the color in the background."; setTimeout(function(),100); 

Here is a working example: https://jsfiddle.net/Lzcht5dz/1/

alert() stops the script until dismissed. Try replacing alert() with display() and define display() as:

Make sure to have an element in your HTML with id display .

The next line of your javascript will not run until after the alert box has been dismissed. Instead of using an alert() you could use console.log() which would not pause execution.

EDIT: My bad, you want the user to see it. As a commenter suggested below, simply change the background color before showing the alert().

How to change text color sweet alert IN JS Code Example, swal(< ; 2. title: "Are you sure?", ; 3. text: "You will not be able to recover this imaginary file!", ; 4. type: "warning", ; 5.

Colour of Text in a Javascript Alert

No , I’m afraid that is not possible.

With JavaScript, you are limited to only 3 popup boxes: alert , prompt and confirm .

If you want to make a more featured popup, you should try using one of the many that exist written in JavaScript, which are built from JavaScript Libraries, such as this

The best you can do for formatting is the new line character \n .

You can’t manipulate the standard alert dialogs this way, but you can make your own ones and style them however you like.

Check out the custom dialog tutorial on slayeroffice.com for an example on how this can be done.

Changing the way a JavaScript Alert() or Prompt() looks, Then some javascript to override the built-in alert function and provide a closing function to handle the click event on alertClose. function closeAlertBox()

Creating different coloured alert messages with Javascript

What you could do is create a div (with your id) and change appearance based on the input by using css classes. Instead of creating a new div beneath the alert div, we can simply change the appearance with the classes alert and success. The div with id ‘alert’ never changes, except for the classes, which you define in your javascript.

Take a look at the css and especially at #alert, #alert.alert and #alert.success. A good thing to note is that the div with id ‘alert’ is hidden by default, this can be overruled in the javascript. Also try to avoid using id on element, because the element is less reusable, then when using classes.

function showalert(id) < var divelement = document.getElementById('alert'); var username = document.getElementById("username").value; if (username === "") < document.getElementById("alertmsg").innerHTML = "You didn't insert a username!"; divelement.style.display = 'block'; divelement.className = 'alert' >else if (username == "u1460714") < document.getElementById("alertmsg").innerHTML = "Successfully logged in"; divelement.style.display = 'block' divelement.className = 'success' >>

#alert < height: 100px; width: 300px; color: white; position: fixed; display: none; >#alert.alert < background-color: #f44336; >#alert.success < background-color: #4CAF50; >.closebtn < margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; >.closebtn:hover < color: black; >#alertmsg

Instead of using two div ‘s you can just set the color of the one. Then you won’t run into issues where you have the same id twice.

function showalert(alert) < var alertBlock = document.getElementById(alert); var inputName = document.getElementById('username'); var messageBlock = document.getElementById('alertmsg'); alertBlock.style.display = 'block'; if (inputName.value == '') < alertBlock.style.backgroundColor = 'red'; messageBlock.innerHTML = 'No username entered'; >else if (inputName.value == 'u2345') < alertBlock.style.backgroundColor = 'green'; messageBlock.innerHTML = 'You entered the specific username'; >>

X   Solution 3: 

I think you have a typo in there

divelement.style.display =='none'; 

should be = ‘none’ or it will do a compare. There are some other lines the same too. Hope this helps

How to change the style of alert box using CSS ?, Sometimes developers like us do not want to just show a normal text inside of the alert box we want to decorate that box in our own way. But the

To get alert message, if color dialog was closed without change in color selection (warning: colorDialog.style.display = «none»;)

You need to use the input event and attach it to the color input. This works, but it’s not a good idea to use alert with the color picker, since the color picker will have a higher z index than the alert, hence the user will not be able to click it.

let someText; let previousColors = []; let colorDialog = document.getElementById("colorDialogID"); function openColorPicker() < colorDialog.focus(); colorDialog.value = "#FFCC00"; colorDialog.click(); >function createStatusF() < someText = prompt("Enter some text :", ""); if ((someText == "") || (someText == null)) < return; >openColorPicker(); > document.getElementById("newlabelID").onclick = createStatusF; document.getElementById("colorDialogID").style.display = "none"; function peintTheText() < var theColor = colorDialog.value; previousColors.push(theColor); document.getElementById("aID").innerHTML = someText; document.getElementById("aID").style.color = theColor; >function onColorSelected(e) < const theColor = colorDialog.value; if (previousColors.includes(theColor)) < alert("You have to select a different color than any of colors you have selected in previous cases to paint the text"); >> colorDialog.addEventListener('input', onColorSelected); colorDialog.addEventListener('change', peintTheText); 

Creating different coloured alert messages with Javascript, What you could do is create a div (with your id) and change appearance based on the input by using css classes. Instead of creating a new

Источник

How to change the color of the alert box in JavaScript?

In this tutorial, we will learn to change the color of the alert box in JavaScript. Also, we will learn to style the whole alert box, including the content of the alert box.

In JavaScript, the alert box is the best way to show the success, failure, or informative messages to the user, when the user performs some operation on the application. The programmers can create the default alert box using the alert() method, but they can’t change the default style of the alert() box.

To change the style of the alert box, programmers need to create the custom alert box and style it according to requirements.

Create a Custom Alert Box Using JavaScript

To create the custom alert box using pure JavaScript, users can create a div element and add the content of the alert box inside that. Also, they can add the close button and style it according to requirement, and set its position at the bottom right corner of the alert box. Furthermore, programmers can set the custom background color for the alert div.

Programmers just need to change the display property or style of the alert box when they want to popup and hide the alert box.

Syntax

Users can follow the syntax below to convert the custom div to the alert box.

 id = "alert"> // content for alert div  // button to open alert div  onclick = 'invokeAlert();'> Show Alert Box   var alertDiv = document.getElementById("alert"); // function to show alert div function invokeAlert()  alertDiv.style.display = "block"; > // function to close alert div function closeDialog()  alertDiv.style.display = "none"; > 

Approach

• Created the custom alert box using the div element.
• Set the background color for the div element and the font color for the text message.
• Properly styled the close button and whole alert box using the CSS in the example.

Example

We have created two functions to show and hide the alert box. When a user clicks on the show alert box button, it will call the invokeAlert() function, which will set ‘dispaly: block’ for the alert div. When the user clicks on the close button inside the alert box, it will invoke the function closeDialog(), which will set the ‘display: none’ for the alert div to hide it.

html> head> /script> style> #alert  display: none; background-color: rgb(252, 219, 219); border: 1px solid green; position: fixed; height: 80px; width: 250px; left: 40%; top: 2%; padding: 6px 8px 8px; text-align: center; > p  font-size: 18px; color: green; > button  border-radius: 12px; height: 2rem; padding: 7px; cursor: pointer; border: 2px solid green; background-color: aqua; > #close  position: absolute; right: 20px; bottom: 10px; > /style> /head> body> h2>Change the color of alert box in Javascript./h2> h4>Creating custom alert box using i> vanilla Javascript./i>/h4> div id = "alert"> p>Welcome to the tutorialsPoint!/p> button id = "close" onclick = "closeDialog()"> Close/button> /div> button onclick = 'invokeAlert();'>Show Alert Box/button> script> var alertDiv = document.getElementById("alert"); function invokeAlert()  alertDiv.style.display = "block"; > function closeDialog()  alertDiv.style.display = "none"; > /script> /body> /html> 
 

This tutorial will teach users to create the custom alert box using the pure JavaScript and that’s how users can change the color of the alert div. Also, users can use the JQuery library to customize the color of the alert box.

Источник