Search code examples
jquerycolorbox

Convert jQuery Colorbox to act as a user dialog?


Is there a nice and easy way to have a Colorbox act as a dialog window? I understand there are enough events which can be addressed but I'm unable to construct this in a nifty way... Or are there existing ways to replace the close button with ok/cancel or yes/no or other buttons..?

Edit: I need to be able to pass somesort of return function (similar to an event) and execute that based on a button click in the dialog (box). Functionality similar to jQuery UI Dialog "buttons"


Solution

  • DEMO: http://so.lucafilosofi.com/convert-jquery-colorbox-to-act-as-a-user-dialog

    JS

        $(function() {
            $(".example").colorbox({
                onOpen : function() {
                    $('#cboxClose').html('<div id="cboxClose"><a class="btn" href="#yes">yes</a><a class="btn" href="#no">no</a></div>').children().unwrap('<div>');
                }
            });
    
            $(document).on("click", "a.btn", function(e) {
                if (this.hash == '#yes')
                    alert('yes');
                else
                    alert('no');
    
                return false;
            });
        });
    

    CSS colorbox reset

    #cboxClose {
        background: transparent;
        width: auto;
        height: auto;
        text-indent: 0;
    }
    

    UPDATED ( to work with latest jQuery 1.9.1 and colorbox 1.4.4 )