FancyBox Confirm Dialog

Demonstration of using FancyBox to create a Confirmation Dialog with configurable callback.

by ydelmas

HTML

<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<a class="fancybox" href="#">click here</a>
<div id="fancyPrompt" style="background-position: top right; background-repeat: no-repeat; padding-top: 10px; display: none;">
    <p class="title"></p>
    <input type="button" class="confirm yes" value="Yes" /><input type="button" class="confirm no" value="No" />
</div>

JavaScript

$(document).ready(function() {
    $(".fancybox").on("click", function(e){   
        e.preventDefault();
        fancyConfirm("Do you wish to continue?", true, function(resp) {
            alert("You clicked " + resp);
        });
    });
});

function fancyConfirm(msg, modal, callback) {
    $.fancybox("#confirm",{
        modal: modal,
        beforeShow: function() {
            $(".title").html(msg);
        },
        afterShow: function() {
            $(".confirm").on("click", function(event){
                if($(event.target).is(".yes")){
                    ret = true;
                } else if ($(event.target).is(".no")){
                    ret = false;
                }
                $.fancybox.close();
            });
        },
        afterClose: function() {
            callback.call(this, ret);
        }
    });
}