Изменение внешнего вида JavaScript Alert () или Prompt () - PullRequest
Новая
       11

Изменение внешнего вида JavaScript Alert () или Prompt ()

9 голосов
/ 14 августа 2011

Есть ли способ изменить внешний вид оповещения или подсказки в JavaScript? Такие вещи, как добавление изображения, изменение цвета или размера шрифта и все, что заставит его выглядеть иначе.

Ответы [ 4 ]

4 голосов
/ 09 июня 2012

Расширяя идею Мэтью Эбботта, меня поразило, что вы хотите получить ответ, который использует старый добрый Javascript без обращения к каким-либо фреймворкам. Вот быстрая и грязная страница, которая выдает div с простой кнопкой закрытия и сообщением, представленным в центре:

Грубый CSS для alertBox и кнопки alertClose 

#alertBox{
    position:absolute;
    top:100px;
    left:100px;
    border:solid 1px black;
    background-color: #528CE0;
    padding: 50px;
    visibility: hidden;
}
#alertClose{
    position: absolute;
    right:0;
    top: 0;
    background-color: black;
    border: solid 1px white;
    color: white;
    width: 1em;
    text-align: center; 
    cursor: pointer;
}

Затем некоторые javascript переопределяют встроенную функцию оповещения и предоставляют функцию закрытия для обработки события click на alertClose. 

function closeAlertBox(){
    alertBox = document.getElementById("alertBox");
    alertClose = document.getElementById("alertClose");
    alertBox.style.visibility = "hidden";
    alertClose.style.visibility = "hidden";
}
window.alert = function(msg){
    var id = "alertBox", alertBox, closeId = "alertClose", alertClose;
    alertBox = document.createElement("div");
    document.body.appendChild(alertBox);
    alertBox.id = id;
    alertBox.innerHTML = msg;
    alertClose = document.createElement("div");
    alertClose.id = closeId;
    alertClose.innerHTML = "x";
    alertBox.appendChild(alertClose);
    alertBox.style.visibility = "visible";
    alertClose.style.visibility = "visible";
    alertClose.onclick = closeAlertBox;
};

Вызов alert, как предположил Мэтью Эбботт, теперь отображает только что созданного вами div, а нажатие на x отклоняет его, делая его невидимым. 

alert("hello from the dummy alert box.");

Для реализации вам понадобится тест в функции оповещения, чтобы убедиться, что вы не воссоздаете div миллион раз, и вам нужно возиться с CSS, чтобы он соответствовал вашему цвету. схема и т. д., но это грубая форма реализации собственного окна оповещения.

Мне кажется это излишним, и я согласен с Мэтью, что делать это с помощью какого-то диалогового или модального элемента, созданного с помощью известного фреймворка, такого как jQuery или YUI, было бы лучше и странно проще в долгосрочной перспективе.

0 голосов
/ 06 февраля 2018

Мой собственный краткий рассказ о некоторых частях кода на этой странице: 

function closeAlertBox() {
    alertBox = document.getElementById("alertBox");
    alertClose = document.getElementById("alertClose");

    alertBox.parentNode.removeChild(alertBox);
    alertClose.parentNode.removeChild(alertClose);
}

window.alert = function (msg) {
    var id = "alertBox", alertBox, closeId = "alertClose", alertClose;
    alertBox = document.createElement("div");
    document.body.appendChild(alertBox);
    alertBox.id = id;
    alertBox.innerHTML = msg;
    alertClose = document.createElement("div");
    alertClose.id = closeId;
    document.body.appendChild(alertClose);
    alertClose.onclick = closeAlertBox;
};
#alertBox {
	position: absolute;
	top: 30%;
	bottom: 60%;
	left: 40%;
	width: 20%;
	height: 10%;
	background-color: white;
	border-radius: 10px;
	padding: 10px;
	z-index: 2;

	text-align: center;
	color: black;
}

#alertClose {
	position: absolute;
	right: 0;
	top: 0;
	background-color: rgba(0, 0, 0, .5);
	width: 100%;
	height: 100%;
}
<html>
<body>
<h1>This is your page</h1>
<p>With some content<p>
<button onclick="alert('Send some message')">Click me</button>
</body>
</html>

Но здесь также есть несколько хороших ответов:

0 голосов
/ 14 августа 2011

Вы не можете изменить это; но вы можете использовать что-то вроде showModalDialog, для загрузки нужной формы hmtl / css требуется только URI (если вы можете сохранить его на отдельной странице).

0 голосов
/ 14 августа 2011

Функции alert и prompt вызывают API, предоставляемые браузером, поэтому вы не сможете контролировать их внешний вид.

То, что вы могли бы делать, хотя этопереопределить эти функции, и вместо этого, возможно, использовать что-то вроде jQuery модальный, например: 

window.alert = function(message) {
    // Launch jQuery modal here..
};

window.prompt = function(message) {
    // Launch jQuery modal here..
};
...