Как задать стиль функции alert() [дубликат]

179

06 августа 2018, 18:40

На данный вопрос уже ответили:

Как переместить браузерный alert? 2 ответа

Как задать стиль функции alert(). Если можно то задать id или class что бы прописать стили в css.

Answer 1

alert - это часть браузера, а не DOM сущность, её нельзя изменять.
Обязательно нашлись бы мошенники, которые что-нибудь гадкое придумали как тогда с окном ухода с сайта.

Answer 2

Ты не можешь изменять стиль стиль стандартного alert, но можешь создать кастомный alert, то есть тот, который ты сделал сам.

Пример кастомного `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>