Note: This article has been marked for a quality review and will soon be updated.
A common feature of desktop applications is that when a user prompts a potentially destructive action, the program will display a confirmation dialog to ensure that the user doesn’t go and do something silly. To do this we will use some basic JavaScript. In this tutorial I will be using jQuery to display and manipulate our elements, but this technique uses good old’ JavaScript to get the job done. So let’s get started. Click here to see the finished product.
Thee are a few ways to do this, namely we could create a global variable and wait for it to be changed by our dialog function and then proceed; or we could have our function return either true or false based on the user input, and then carry on. However the method we will be using will be to mole net a function that accepts a callback function as one of its parameters. If the user confirms the action the callback function will be called, and of not we will simply hide our dialog and do nothing. So with that in mind, lets create the HTML for our dialog. Here’s what I’ve got:
<span class="lightswitch" style="display:none"> <div class="confirm" style="display:none"> <div class="wrapper"> <h3>Are you sure? <p>This will clear all the changes you have made. <button class="left" id="confirm-continue">Continue <button class="right" id="confirm-cancel">Cancel </div> </div>
So we have 2 elements to worry about here – the .lightswitch span, and our .confirm div. The light-switch code will be used to dim the rest of the screen while the dialog is open to ensure focus is directed to whatever we want to put on our pop-up. All that’s left is to style our dialog – feel free to go mad with your CSS at this point, but this is what I ended up with:
.right { float:right; }
.left { float: left; }
.confirm {
display: block;
width:350px;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-175px;
z-index: 1500;
overflow: hidden;
cursor: default;
position: fixed;
background: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.confirm .wrapper {
padding-bottom:10px;
overflow: hidden;
font-family: sans-serif;
color: #000;
}
.confirm span {
width: 90%;
margin:0 5%;
display: block;
}
.confirm h3 {
background: #212121;
font-size: 22px;
color: #fff;
width:91%;
padding:2% 5%;
margin:0;
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
}
.confirm button {
border:none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #fff;
background: #212121;
padding:5px 10px;
font-size: 15px;
}
.lightswitch {
display: block;
background: rgba(0,0,0,0.75);
z-index:1000;
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
position: fixed;
overflow: hidden;
}
The CSS above gives us a centred box with a dimmed background overlaid on top of the rest of the page. The rest of it is just basic styling that you’ll want to change to fit with your own UI.
And now to the JavaScript! Here’s how it looks:
function confirmIt(title,text,callback){
$('body').append('');
$('.lightswitch').fadeIn(300, function(){
$('.confirm').fadeIn(100);
});
$('#confirm-continue').click(callback);
$('#confirm-cancel').click(function(){ $('h1 span').text('Action Cancelled'); })
$('.confirm button').click(function(){
$('.confirm').fadeOut(500, function(){
$('.lightswitch').fadeOut(200, function(){
$('.confirm, .lightswitch').remove();
});
})
});
}
Let’s go through what it does. On the first line we can see the 3 parameters we pass to the function for the title, text, and callback function for our dialog. If the user confirms the action they initiated the callback function will be called, and if not, the action will be cancelled. The function beings by appending the HTML we wrote earlier to the end of our page and then fades-in our .lightswitch to dim the background; and when that completes it fades in the actual confirmation dialog. That’s the first part sorted.
We then have to set up some event handlers – for when the user clicks “Continue” and when they click “Cancel”. For our continue button we can simply use the function passed to us to confirm the action was intended. We could leave our cancel button without an event handler, but in our case we will change the content of our main heading to reflect the user’s choice. But neither of those lines actually get rid of our dialog, so even if the user confirmed/canceled the action our box would still be visible. So to remove it from the screen we will bind a function to the click events of both buttons. In that function we simply reverse the fading-in of the elements, and then remove them from the DOM to ensure we don’t go having multiple elements with the same IDs in the future.
And with that we are finished! We now have a good system in place to ensure our users don’t accidentally delete or perform some other destructive action on their data.