Thay đổi cách Alert JavaScript() hoặc Prompt() trông

Question

Có cách nào để thay đổi vẻ bề ngoài của một cảnh báo hoặc nhắc trong JavaScript? Những thứ như thêm hình ảnh, thay đổi màu hoặc kích thước phông chữ và mọi thứ sẽ làm cho nó trông khác.

Answer 1

alert và prompt chức năng API cuộc gọi do trình duyệt cung cấp, do đó bạn sẽ không có bất kỳ kiểm soát nào về giao diện của chúng.

Những gì bạn có thể làm mặc dù được xác định lại những chức năng, và thay vào đó có thể sử dụng giống như jQuery phương thức, ví dụ .:

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

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

Answer 2

Bạn không thể sửa đổi đó; nhưng bạn có thể sử dụng một cái gì đó như showModalDialog, nó chỉ cần một URI để tải mẫu hmtl/css bạn muốn (nếu bạn có thể giữ nó trong một trang riêng biệt).

Answer 3

Mở rộng theo ý tưởng của Matthew Abbott, tôi nghĩ rằng bạn muốn có câu trả lời sử dụng Javascript cũ thuần túy mà không cần đến bất kỳ khung công tác nào. Đây là một trang nhanh chóng và dơ bẩn mà phát ra một div với một nút đóng đơn giản và thông điệp được trình bày trong trung tâm:

CSS Rough cho alertBox và nút 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; 
} 

Sau đó, một số javascript để ghi đè lên xây dựng -in chức năng cảnh báo và cung cấp một chức năng đóng để xử lý các sự kiện bấm vào 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; 
}; 

Calling alert, như Matthew Abbott đề nghị, bây giờ hiển thị div mà bạn vừa tạo và nhấn vào x gạt bỏ nó bằng cách làm cho nó vô hình.

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

Để triển khai, bạn cần phải thử nghiệm chức năng cảnh báo để đảm bảo bạn không tạo lại div hàng triệu lần và bạn cần phải lộn xộn với CSS để tạo nó phù hợp với màu sắc của bạn vv, nhưng đó là hình dạng thô của cách thực hiện hộp cảnh báo của riêng bạn.

Có vẻ như quá mức đối với tôi và tôi đồng ý với Matthew rằng việc thực hiện nó với một số loại hộp thoại hoặc yếu tố phương thức được tạo bằng một khung nổi tiếng như jQuery hoặc YUI sẽ tốt hơn và dễ dàng hơn về lâu dài.

Answer 4

Một chạy nhanh của riêng tôi, mở rộng trên một số mã trên trang này:

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 { 
 
\t position: absolute; 
 
\t top: 30%; 
 
\t bottom: 60%; 
 
\t left: 40%; 
 
\t width: 20%; 
 
\t height: 10%; 
 
\t background-color: white; 
 
\t border-radius: 10px; 
 
\t padding: 10px; 
 
\t z-index: 2; 
 

 
\t text-align: center; 
 
\t color: black; 
 
} 
 

 
#alertClose { 
 
\t position: absolute; 
 
\t right: 0; 
 
\t top: 0; 
 
\t background-color: rgba(0, 0, 0, .5); 
 
\t width: 100%; 
 
\t 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>

Nhưng cũng có một số câu trả lời tốt ở đây:

• how to change the style of alert box