JavaScript hộp cảnh báo với xác nhận vào nút bấm

Question

Tôi có liên kết này:

<p id="accept-favor"><a title="Accept this Favor" href="?wp_accept_favor=<?php comment_ID(); ?>">Accept this Favor</a></p>

Tôi muốn hiển thị một hộp cảnh báo JavaScript khi người dùng nhấp nó nói: "Bạn có chắc chắn bạn muốn chấp nhận điều này trả lời như là ân huệ của bạn? " với hai nút một nói rằng "Có" mà sẽ cho phép các chức năng để chạy và khác nói "Không" mà sẽ chỉ hủy bỏ postback và giữ cho người dùng trên trang.

Tôi làm như thế nào? Cảm ơn :)

Answer 1

Bạn có thể dễ dàng làm điều đó với một xác nhận onclick:

<p id="accept-favor"><a title="Accept this Favor" 
    href="?wp_accept_favor=<?php comment_ID(); ?>" 
    onclick="return confirm('Are you sure you would like to accept this reply as your favor?');" 
    >Accept this Favor</a></p> 

Mặc dù điều này sẽ nói OK/Cancel thay vì Yes/No. Nếu bạn thực sự muốn Có/Không, bạn sẽ phải sử dụng hộp thoại tùy chỉnh.

Answer 2

Bạn có thể viết onclick="return confirm('Are you sure?');".

confirm function hiển thị hộp thoại OK/Hủy và trả lại true nếu người dùng nhấp OK.
return ing false từ trình xử lý onclick sẽ hủy tác vụ mặc định của lần nhấp.

Answer 3

Như câu trả lời khác nói về trực tiếp onclick, tôi muốn trình bày một giải pháp cho một "đẹp hơn" (IMO = theo ý kiến ​​của tôi) phiên bản sử dụng các phương pháp addEventListener và preventDefault. Bởi vì theo cách này, bạn có thể ràng buộc thêm nhấp vào trình xử lý.

HTML

<a href="#" id="confirmClickActionElementId">click me</a> 

Javascript

document 
    .getElementById("confirmClickActionElementId") 
    .addEventListener("click", function(e){ //e => event 
     if(! confirm("Do you really want to do this?")){ 
      e.preventDefault(); // ! => don't want to do this 
     } else { 
      //want to do this! => maybe do something about it? 
      alert('Ok, lets do this!'); 
     } 
    }); 

Fiddle: http://jsfiddle.net/ouyf86ya/

... hoặc cũ "return" cách:

document 
    .getElementById("confirmClickActionElementId") 
    .addEventListener("click", function(){ 
     return confirm("Do you really want to do this?") ; 
    }); 

Fiddle: http://jsfiddle.net/y2jLpkbb/

Answer 4

Bạn có thể sử dụng chức năng này:

myFunction() { 
    var x; 
    if (confirm("Are you sure?") == true) { 
     x = "You pressed OK!"; 
    } else { 
     x = "You pressed Cancel!"; 
    } 
    return x; 
} 
myFunction();