javascriptjqueryoverlayjquery-tools

jquery tools overlay, how to keep mask when switching overlays


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.


Solution

  • I hope you do not mind but I created my own simplified example. Hopefully you will be able to adapt this to your situation.

    There is a little bit of flicker between the dialogue boxes (due to the animation effect) but the mask stays in place. I imagine you could remove the flickering by adjusting the animation effect settings - I suspect you could do something in the overlay's onBeforeLoad method but I'm not exactly sure what.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Chained Modals</title>
        <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
        <style>
        .modal {
            background-color:#fff;
            display:none;
            width:350px;
            padding:15px;
            text-align:left;
            border:2px solid #333;
    
            opacity:0.8;
            -moz-border-radius:6px;
            -webkit-border-radius:6px;
            -moz-box-shadow: 0 0 50px #ccc;
            -webkit-box-shadow: 0 0 50px #ccc;
        }
        </style>
    </head>
    <body>
    <p>
        <button class="modalInput" rel="#box1">Stage 1</button>
    </p>
    <div class="modal" id="box1">
        <h2>Stage 1 dialogue</h2>
        <p>
            You can only interact with elements that are inside this dialog.
            To close it click a button or use the ESC key.
        </p>
        <button class="modalInput" rel="#box2">Stage 2</button>
    </div>
    <div class="modal" id="box2">
        <h2>Stage 2 dialogue</h2>
        <p>
            You can only interact with elements that are inside this dialog.
            To close it click a button or use the ESC key.
        </p>
        <button class="modalInput" rel="#box3">Stage 3</button>
    </div>
    <div class="modal" id="box3">
        <h2>Stage 3 dialogue</h2>
        <p>
            You can only interact with elements that are inside this dialog.
            To close it click a button or use the ESC key.
        </p>
        <button class="close">End</button>
    </div>
    <script>
    
    $(window).load(function() {
    var msk;
    
    var triggers = $(".modalInput").overlay({
        mask: {
            color: '#ebecff',
            loadSpeed: 200,
            opacity: 0.9,
            onClose: function() {
                var id = this.getExposed().attr('id');
                if(id == 'box1'|| id == 'box2'){
                   var nextId;
                   if(id == 'box1'){
                      nextId = '#box2';
                   }
                   if(id == 'box2'){
                      nextId = '#box3';
                   }
                   msk = this.getMask();
                   msk.css('display','block');
                   $(nextId).css('z-index', '9999');
                }
            }
        },
        closeOnClick: false,
        onBeforeLoad: function(){
            var id = this.getOverlay().attr('id');
            if(id == 'box2'|| id == 'box3'){
                   // need to put something here to avoid flicker
                   //
               // this.getConf().mask.startOpacity = 0.8; 
            }
        }
    });
    
    });
    </script>
    </body>
    </html>
    

    I hope this helps.