This question has already been answered:

How to set the style of the alert () function. If you can then set the id or class to write styles in css.

Reported as a duplicate at Grundy. javascript 26 Jun '18 at 17:42 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • If you want to give styles for a pop-up window, then you need to create it, and not try to give styles alert (), which of course is pointless ... VladimirBalun

2 answers 2

alert is part of the browser, not the DOM entity, it cannot be changed.
Surely there would be fraudsters who invented something ugly as they did with the exit window.

    You cannot change the style of the standard alert , but you can create a custom alert , that is, the one you made yourself.

    Example of custom alert

     function CustomAlert() { this.render = function(dialog) { var winW = window.innerWidth; var winH = window.innerHeight; var dialogoverlay = document.getElementById('dialogoverlay'); var dialogbox = document.getElementById('dialogbox'); dialogoverlay.style.display = "block"; dialogoverlay.style.height = winH + "px"; dialogbox.style.left = (winW / 2) - (550 * .5) + "px"; dialogbox.style.top = "100px"; dialogbox.style.display = "block"; document.getElementById('dialogboxhead').innerHTML = "Заголовок"; document.getElementById('dialogboxbody').innerHTML = dialog; document.getElementById('dialogboxfoot').innerHTML = '<button onclick="Alert.ok()">OK</button>'; } this.ok = function() { document.getElementById('dialogbox').style.display = "none"; document.getElementById('dialogoverlay').style.display = "none"; } } var Alert = new CustomAlert(); 
     #dialogoverlay { display: none; opacity: .8; position: fixed; top: 0px; left: 0px; background: #FFF; width: 100%; z-index: 10; } #dialogbox { display: none; position: fixed; background: #000; border-radius: 7px; width: 550px; z-index: 10; } #dialogbox>div { background: #FFF; margin: 8px; } #dialogbox>div>#dialogboxhead { background: #666; font-size: 19px; padding: 10px; color: #CCC; } #dialogbox>div>#dialogboxbody { background: #333; padding: 20px; color: #FFF; } #dialogbox>div>#dialogboxfoot { background: #666; padding: 10px; text-align: right; } 
     <div id="dialogoverlay"></div> <div id="dialogbox"> <div> <div id="dialogboxhead"></div> <div id="dialogboxbody"></div> <div id="dialogboxfoot"></div> </div> </div> <button onclick="alert('Стандартный alert')">Стандартный alert</button> <button onclick="Alert.render('Кастомный alert #1')">Кастомный alert #1</button> <button onclick="Alert.render('Кастомный alert #2')">Кастомный alert #2</button>

    • one
      These are ordinary modal windows, and alert is an indication of how the browser works :) But suitable, of course. - user207618 5:24 pm
    • @Other yes, that is true, but there is simply no other option in this case) - user192664
    • "display of the browser is exactly"? What is it? - vp_arth
    • The fundamental difference between the native alert from everything that you can do yourself is that it is synchronous (it also causes the focus of its tab, but this is no longer the case). - vp_arth