更改 JavaScript Alert() 或 Prompt() 的外觀

Question

有什么方法可以改變 JavaScript 中警報或提示的外觀？ 諸如添加圖像、更改字體顏色或大小以及任何使它看起來不同的事情。

Answer 1

擴展 Matthew Abbott 的想法，令我震驚的是，您想要一個使用普通舊 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 覆蓋內置警報 function 並提供關閉 function 來處理警報關閉上的點擊事件。

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 ，正如 Matthew Abbott 建議的那樣，現在顯示您剛剛創建的 div 並單擊 x 將其關閉，使其不可見。

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

要實施，您需要在警報 function 中進行測試，以確保您沒有重新創建 div 一百萬次，並且您需要弄亂 CSS 以使其適合您的配色方案等，但這是如何實現自己的警報框的粗略形式。

對我來說似乎有些矯枉過正，我同意 Matthew 的觀點，從長遠來看，使用 jQuery 或 YUI 等著名框架創建的某種對話框或模態元素會更好，而且更容易。

Answer 2

alert和prompt函數調用瀏覽器提供的 API，因此您無法控制它們的外觀。

你可以做的是重新定義這些功能，而不是使用類似 jQuery 模態的東西，例如：

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

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

Answer 3

我自己的快速運行，擴展了此頁面上的一些代碼：

 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>

但這里也有一些很好的答案：

如何更改警告框的樣式

Answer 4

你不能修改它； 但是你可以使用類似showModalDialog的東西，它只需要一個 URI 來加載你想要的 hmtl/css 表單（如果你可以將它保存在一個單獨的頁面中）。

更改 JavaScript Alert() 或 Prompt() 的外觀

問題描述

4 個解決方案

解決方案1
4 2012-06-09 07:36:56

解決方案2
1 2011-08-14 12:25:48

解決方案3
0 2018-02-06 20:17:10

解決方案4
0 2011-08-14 13:21:19

更改 JavaScript Alert() 或 Prompt() 的外觀

問題描述

4 個解決方案

解決方案1 4 2012-06-09 07:36:56

解決方案2 1 2011-08-14 12:25:48

解決方案3 0 2018-02-06 20:17:10

解決方案4 0 2011-08-14 13:21:19

解決方案1
4 2012-06-09 07:36:56

解決方案2
1 2011-08-14 12:25:48

解決方案3
0 2018-02-06 20:17:10

解決方案4
0 2011-08-14 13:21:19