You’re probably looking for confirm(), which displays a prompt and returns true or false based on what the user decided:

if (confirm('Are you sure you want to save this thing into the database?')) {
  // Save it!
  console.log('Thing was saved to the database.');
} else {
  // Do nothing!
  console.log('Thing was not saved to the database.');
}

In an attempt to solve a similar situation I've come across this example and adapted it. It uses JQUERY UI Dialog as Nikhil D suggested. Here is a look at the code:

HTML:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<input type="button" id="box" value="Confirm the thing?" />
<div id="dialog-confirm"></div>

JavaScript:

$('#box').click(function buttonAction() {
  $("#dialog-confirm").html("Do you want to do the thing?");

  // Define the Dialog and its properties.
  $("#dialog-confirm").dialog({
    resizable: false,
    modal: true,
    title: "Do the thing?",
    height: 250,
    width: 400,
    buttons: {
      "Yes": function() {
        $(this).dialog('close');
        alert("Yes, do the thing");
      },
      "No": function() {
        $(this).dialog('close');
        alert("Nope, don't do the thing");
      }
    }
  });
});

$('#box').click(buttonAction);

I have a few more tweaks I need to do to make this example work for my application. Will update this if I see it fit into the answer. Hope this helps someone.

The javascript confirm dialog cannot be customized.

If you require dialog customization I would suggest looking at JQuery UI - Dialog

The buttons in a confirmation box cannot be changed by Javascript.

I would suggest rolling your own in the form of an inline popup. Just create a div with position:absolute; in the centre of the page and then show/hide it.

EDIT:

The code below will outline what you need to do in vanilla Javascript. You will probably want to spend more time styling it, but the key points are:

position:absolute; So that the popup will appear in the centre of the page. display:none; So that the popup will be hidden when the page loads. The link has a href so that it will still be functional even without Javascript. The onClick attribute of the first link has return false; This stops the link from redirecting.

You can change the two onClicks inside the popup to do whatever else you want them to.

Copy<style type="text/css">

div#popup
{
    position:absolute;
    display:none;
    top:200px;
    left:50%;
    width:500px; 
    margin-left:-250px;
    border:1px solid blue; 
    padding:20px;
    background-color:white;
}

</style>

<a 
    href="http://example.com/" 
    onclick="document.getElementById('popup').style.display = 'block'; return false;"
>Go to example.com</a>


<div id="popup">
    <p>Are you sure you want to go to example.com?</p>
    <p>
        <a onclick="document.location='http://example.com/'; return false;">
            Yes
        </a>
        <a onclick="document.getElementById('popup').style.display = 'none'; return false;">
            No
        </a>
    </p>
</div>

To get a more professional result I would recommend learning more about JavaScript and jQuery and investigating some of the options suggested by the other posters.