Color in javascript alert

How to style javascript alert?

I want to style alert message screen in javascript. I’ve been testing almost all kinds of methods to style alert message screen by using alertify.js , sweetalert.js, dialog etc. However, these mothods couldn’t stop whole system. As you know, javascript alert has function that stopping whole codes until ‘ok’ button will be clicked. all methods that i had tried above didn’t provide that stopping function. What methods should i have to use? Thanks.

There is no particular codes. I just asked about other functions that provides similar functions like ‘pure’ alert.

So you need to show what you have attempted. You waste people’s time posting answers that you have already tried.

The alert() method opens a dialog box controlled by your browser. it HAS to be in the design of the browser. imagine if someone could style it to be a windows dialog or something else. horrible thoughts occur. Sounds like you ought to recode your app to not use alert()

2 Answers 2

I think what you are asking for is not possible. You cannot style the native javascript alert, and any non-native solution won’t behave the exact same way as the native alert does.

The best you can do is make some alert UI (using html/css and a bit of js to toggle it on/off) that overlays the page (using css and a higher zindex most likely) and prevents the user from interacting with the content underneath.

Thank you for your fast response. I tried similar method that you mentioned while following this video. youtube.com/watch?v=-RLE2Q7OzME this source blocked whole page but it restarts whole page again..

HTML 5 includes an element called dialog , which unlike JavaScript’s alert(text) , can be styled.

function opendialog() < const element = document.getElementById("foo"); // Your element ID here element.open = true; console.log("Dialog opened"); >function closedialog() < const element = document.getElementById("foo"); // Your element ID here element.open = false; console.log("Dialog closed"); >

/*I am the dev of this style https://github.com/TylerMS887/adwaita.css*/ @import url('https://fonts.googleapis.com/css2?family=Cantarell&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono&display=swap'); code, pre < font-family: monospace, "Red Hat Mono"; >select < padding: 10px; border: 0px; border-radius: 10px; transition: background-color 0.5s, color 0.5s; >@media (prefers-color-scheme: dark) < select < background-color: #5B5B5B; color: white; >> body < font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif; padding: 10px; transition: background-color 0.5s, color 0.5s; >@media (prefers-color-scheme: dark) < dialog < background-color: #3A3A3A; color: white; box-shadow: 0px 0px 20px darkgray; >> @media (prefers-color-scheme: dark) < body < background-color: #3A3A3A; color: white; >> button < transition: background-color 0.5s, color 0.5s; >@media (prefers-color-scheme: light) < button < padding: 15px; padding-top: 10px; padding-bottom: 10px; border: none; border-radius: 7.5px; background-color: #e6e6e6; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif; >button:hover < background-color: #b0b0b0; >button:active < background-color: #828282; >> @media (prefers-color-scheme: dark) < button < padding: 15px; padding-top: 10px; padding-bottom: 10px; border: none; border-radius: 7.5px; background-color: #5B5B5B; color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif; >button:hover < background-color: #3F3F3F; >button:active < background-color: #2D2D2D; >> dialog < padding: 15px; border: 0px; border-radius: 10px; box-shadow: 0px 0px 20px black; transition: background-color 0.5s, box-shadow 0.5s; color 0.5s; >.container < display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >input[type="text"] < border: none; border-bottom: 1px solid #ccc; padding: 8px 0; font-size: 16px; color: #333; >input[type="text"]:focus < outline: none; border-bottom-color: #66afe9; >.container input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkmark < position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 5px; transition: background-color 0.05s; >.container:hover input~.checkmark < background-color: #ccc; >.container input:checked~.checkmark < background-color: #2196F3; >.container input:disabled~.checkmark < background-color: #ccc; >.checkmark:after < content: ""; position: absolute; opacity: 0; transition: opacity 0.05s; >.container input:checked~.checkmark:after < opacity: 100; >.container .checkmark:after < left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; border-radius: 1.5px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); >kbd < font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif; background-color: #CCCCCC; border-radius: 5px; padding: 5px; >@media (prefers-color-scheme: dark) < kbd < background-color: #5B5B5B; color: white; >>

Open the dialog 
Hello World 
This dialog opened on run-time!
 
Close dialog
 

Источник

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.

Источник

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

Classes: flash: This is the default class, it provides blue color to the alert. flash-warn: This class provides yellow color to the alert. We’re using JavaScript library, jQuery to achieve this and will change the color of the alert box to “blue” − Example Live Demo Question: I need to choose a color to be used with notifications.

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

You can try to run the following code to change the color of the alert box . To change the color of the alert box, use the following custom alert box. We’re using JavaScript library, jQuery to achieve this and will change the color of the alert box to “blue” −

Example

      #confirm < display: none; background-color: #8416f9; color: #FCD116; border: 1px solid #aaa; position: fixed; width: 250px; left: 50%; margin-left: -100px; padding: 6px 8px 8px; box-sizing: border-box; text-align: center; >#confirm button < background-color: #48E5DA; display: inline-block; border-radius: 5px; border: 1px solid #aaa; padding: 5px; text-align: center; width: 80px; cursor: pointer; >#confirm .message  
   

Change alert message text color using javascript, No. alert() accepts a string and renders it using a native widget. There is no provision to style it. There is no provision to style it. The closest you could get would be to modify the HTML document via the DOM to display the message instead of using an alert() . Code samplealertbox.style.top = (window.innerHeight/10)+»pt»;alertbox.style.display = «block»;document.getElementById(‘alertboxhead’).innerHTML = «JavaScript String fontcolor() Method :»;document.getElementById(‘alertboxbody’).innerHTML = alert;document.getElementById(‘alertboxfoot’).innerHTML = ‘OK‘;Feedback

What is the most effective color to be used on notifications?

I need to choose a color to be used with notifications. I was placing an exclamation mark over a red circle, but I was told it looks more like an error if you haven’t seen it in the UI before. So now I’m a bit lost.

Note, I used green already on «adding» a friends button.

Yellow (maybe). I say maybe because it might clash horribly with your site design colors, or even blend in with your site design colors.

Should Color or Animation be used?

If the notification is pinned to the top of the window then it is likely to be towards the user’s peripheral vision. As such, movement is more likely to be noticed and color changes less so. Just don’t be annoying with it.

Some research that might be relevant: http://www.alma.edu/departments/psychology/SP98/ZaMa/pcv.html

Yellow was, on average, the most quickly identified color(see figure 1) at 73 degrees in the right eye and 73.5 in the left, red was second(72, 70.5). The least recognizable colors were green(60.5, 64.25) and purple(64, 63). Blue was recognized at 68.75 degrees from the center of the right eye, and 68 from the left. In addition the subjects often identified the color green as being either purple or red and in one case pink before reporting a sudden shift to a perception of the actual color.

As well as considering colour — you should at least consider if you can make something more conspicuous by it’s absence of colour — i.e. a black background, in which case be sure to use a larger clear font colour such as white for ensuring readability.

I think the notification bar here at StackExchange works well, which I think is white on black. If necessary you can incorporate branding and colour themes a little by making it a very dark version of a colour as the background.

Naturally, any notification colour scheme depends on how it contrasts with the rest of your colour scheme. A yellow notifaction is less suitable if the rest of the scheme is a similar colour, for example, but if the rest of your scheme is already black then this concept is less suitable and perhaps the yellow should indeed prevail.

Consider whether your colour schemes may vary across pages or other content. If you have quite varied content, especially with a lot of images, then picking a generic notification scheme that stands out in all situations is tricky, and this black background may complement more scenarios than other colours.

Ensure consistency as this will breed familiarity and therefore faster recognition, allowing notifications to be registered as such more quickly, but also bear in mind that users frequently ignore and dismiss notification s without reading, so really important notifications may need something extra that attracts the user’s attention. One alternative to providing a dismiss capability is to show the notification for a specific time period, possibly fading it in and out smoothly.

Whatever the situation, use notifications sparingly as they are strong distractors — there are plenty of questions here on ux.se about notification best practices

For notifications, the colour scheme should match with the scheme for the rest of the site. So look at the colour scheme of the site, and find something that stands out, but also fits — dark rather than light is probably better.

If you are using contrasting colour — including the red often used for error indicators — it will be seem as an alert, not a notification. That is, something that requires attention immediately, not something that is useful information.

There is actually no right answer to this questions. It is very relative to the sort of design scheme you have pre-existing on the app or website.

I guess the use of colors in normal life should be extended for notifications or alerts as well. Example ‘Red’ would signify urgency, danger, warning so probably use that accordingly.

Normal guidelines we use while developing out apps and websites are: Maybe this can help you too

Font Awesome 5 Alert Icons, Font Awesome 5. Font Awesome 5 Intro Icons Accessibility Icons Alert Icons Animals Icons Arrows Icons Audio & Video Icons Automotive Icons Autumn Icons Beverage Icons Brands Icons Buildings Icons Business Icons Camping Icons Charity Icons Chat Icons Chess Icons Childhood Icons Clothing Icons Code Icons …

Primer CSS Alerts Color

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

In this article, we will learn about Primer CSS Alerts Color. Primer css alert s Color is used to add colors to the alerts like blue, red, green and yellow.

• flash: This is the default class, it provides blue color to the alert.
• flash-warn: This class provides yellow color to the alert.
• flash-error: This class provides red color to the alert.
• flash-success: This class provides a success color to the alert.

Note: * represent a class that is used to provide color. We will discuss these classes below

Example 1: In this example, we will display Alerts using classes flash and flash-warn

Источник