Cách cá nhân hóa các nút cảnh báo - window.confirm() và window.alert()

Question

Tôi đã thấy nhiều trang web đã cá nhân hóa các hộp cảnh báo và xác nhận bằng văn bản nút khác nhau.

Theo mặc định, đây là những gì JavaScript window.confirm() chức năng sẽ ra:

+-----------------------------+ 
|Message from webpage   | 
+-----------------------------+ 
|Popup text     | 
|        | 
|        | 
|        | 
|        | 
| [Ok]  [Cancel]   | 
+-----------------------------+ 

Nhưng, những gì nếu tôi muốn một số tùy biến như văn bản tiêu đề tùy chỉnh, và nút tùy chỉnh văn bản?

+-----------------------------+ 
|My custom Header    | 
+-----------------------------+ 
|Popup text     | 
|        | 
|        | 
|        | 
|        | 
| [HELLO]  [GOODBYE]  | 
+-----------------------------+ 

Điều này có thể đạt được bằng JavaScript, Jquery hoặc AJAX (hoặc ngôn ngữ khác) không? Nếu vậy, bạn có thể vui lòng chỉ cho tôi một ví dụ không? Cảm ơn!

Answer 1

Tôi sẽ không khám phá bất kỳ điều gì mới ở đây. Và các bình luận được tạo ra nói tất cả các thông tin liên quan nhất.

Bạn nên xem các lựa chọn thay thế nguồn mở có hỗ trợ tuyệt vời và dễ dàng tùy chỉnh. Hãy xem BootBoxJS (nó phụ thuộc vào jQuery).

Trong trang web đó, bạn có thể tìm thấy các ví dụ về cảnh báo, hộp thoại và các công cụ hữu ích khác. ví dụ.

Để sử dụng phần mềm được đề cập:

1. Tải js library compressed (bao gồm cả js, css, vv)
2. Giải nén file bất cứ điều gì bạn muốn.
3. Sau đó sao chép và dán the example code và lưu số này dưới dạng example.html hoặc bất kỳ thứ gì bạn muốn.
4. Bây giờ hãy thay đổi các liên kết để làm cho nó trỏ đến tệp đã tải xuống của bạn (xem cách tôi thay đổi my file)
5. Lưu tệp và thử nghiệm bằng trình duyệt ưa thích của bạn.

Tôi vừa làm nó và nó hoạt động hoàn hảo! (Trong Firefox và Chromium)

LƯU Ý: Tôi đã thử nghiệm phiên bản BootStrap (v.3) mới và nó không hoạt động.

Answer 2

No. Một đánh giá đơn giản về the docs có thể hữu ích. Các applet Java có các yếu tố giao diện người dùng theo kiểu tương tự (nhưng khác biệt rõ ràng) có thể là những gì bạn đã thấy trong quá khứ.

Nếu bạn muốn bạn có thể tạo hộp thoại của riêng bạn bằng cách sử dụng HTML/CSS/JavaScript hoạt động như hộp thoại tác nhân người dùng, nhưng đó là rất nhiều công việc cho kết quả.

Answer 3

Câu trả lời đơn giản là bạn có thể không, nhắc nhở không hỗ trợ tính năng này,

Tuy nhiên bạn có thể sử dụng Jquery hoặc xây dựng phương thức riêng của mình/thoại để bắt chước chức năng này.

Xem jQuery UI Dialo g để biết các ý tưởng và ví dụ.

Thiết lập ví dụ từ trang kiểm tra jsfiddle

HTML:

<div id="dialog-confirm" title="Empty the recycle bin?"> 
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p> 
</div> 

<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p> 

JS

$(function() { 
    $("#dialog-confirm").dialog({ 
     resizable: false, 
     height:140, 
     modal: true, 
     buttons: { 
     "Delete all items": function() { 
      $(this).dialog("close"); 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
     } 
    }); 
    }); 

CSS là lớn để gửi, nhưng bạn có thể liên kết tập tin này :

http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css