jquery tools overlay, how to keep mask when switching overlays

Question

I have a simple problem with 2 overlays. One overlay is triggered from (and by) the other overlay. As only one overlay can be active at any one time, correctly so, overlay number 1 that triggered 2 closes. However, it takes the mask with it and hence overlay 2 appears without the mask. How can I switch between 2 overlays without the mask disappearing?

The code, overlay 1

$("button[rel*=busy]").overlay({     

    api: true , 
    mask: {
        maskId: 'defaultMask' ,
        color: null
    },
    effect: 'apple',

    onLoad: function() {

        $.post( 'ajax_file_here.php' ,
            { var: something } ,
            function( data ){                

                if( data.status == 'confirm' ) {

                    confirmOverlay();

                } else {

                    errorOverlay();

                }              

            } ,
            'json' );

    } ,
    closeOnClick: false ,
    closeOnEsc: false ,
    close: '.noClose'       

});

And overlay 2

var errOverlayObject = $('#error_overlay').overlay({

    api: true,      
    mask: {
        maskId: 'defaultMask' ,
        color: null
    },
    effect: "apple"

});

function errorOverlay() {

    errOverlayObject.load();

}

As you can see there is also a confirm version of the second overlay, but that works identical to the error one.

Answer 1

I think an easier way would be to

.overlay({
   mask: { color: '#000', opacity: '.60' },
   onLoad: function(){
       var t = $.mask;
       if(!t.isLoaded()){
            t.load();
            var ov = this.getOverlay();
            ov.css('z-index', '9999');
       }
   }
});