Question

Hi I’m having an issue with using jquery overlays failing to close when my script has finished processing.

All I am doing is displaying a very simple form taking the values on submit processing them in the background and adding them to a page. Once this is done the overlay should close, however it just stays there, and won’t go until I do a full page refresh.

My Jquery code looks like this:

function employmenthistory(){

    $(document).ready(function(){

        /**
        * Modal Dialog Boxes Setup
        */
        var triggers = $(".modalInput").overlay({

            // some mask tweaks suitable for modal dialogs
            mask: {
                color: '#ebecff',
                loadSpeed: 200,
                opacity: 0.7
            },

            closeOnClick: false
        });

        /* User Input Prompt Modal Box */
        $("#employmentprompt form").submit(function(e) {

            // get user input
            var name = $("#name", this).val();
            var role = $('#role', this).val();
            var title = $("#title", this).val();

            //we need to know how many elements already exist
            var elementCount = $('li.note').length;

            //update server with information about this employment
            $.ajax({
                url: '/addempl/',
                type : 'post',
                data : "name=" + name + "&role=" + role + "&title=" + title + "&ec=" + elementCount,
                dataType: "json",
                success : function(msg){

                    //confirm the event was successful
                    if(msg.status == 'success'){

                        var item = msg.data;

                        //we now add to the ul for elements
                        $('ul.listing').append(item);

                    }else{

                        //failed to process so display error
                        $('div.message error').html('<p>We were unable to add your employment history</p><p>Please try again</p>');
                    }
                },
                error : function(err){

                    //failed to call server 
                    $('div.message error').html('<p>We were unable to add your employment history</p><p>Please try again</p>');
                }
            });

            // close the overlay
            triggers.eq(0).overlay().close();

            // do not submit the form
            return e.preventDefault();
        });
    });



}

All aspects of this code works fine apart from when I get to

triggers.eq(0).overlay().close();

The overlay with the form in it remains on the page. There is only one modelInput element and form that can be called so I am not sure why this is failing.

All I’ve done is follow the example that can be found here:

http://flowplayer.org/tools/demos/overlay/modal-dialog.html

Any help with this would be gratefully received.

Thanks.

Answer 1

I think you need to use the api argument in your overlay command. I don’t see it on their example, but I recall that being my problem in the past.

    var triggers = $(".modalInput").overlay({

        // some mask tweaks suitable for modal dialogs
        mask: {
            color: '#ebecff',
            loadSpeed: 200,
            opacity: 0.7
        },

        closeOnClick: false,
        api: true
    });

Update

Here is a Working Demo showing the opening/closing of modal as well as opening one modal from another. Hope it helps.

This is the code I am currently using…

var currentModal;

function openModal(divName){
    closeModal();
    if ($('#' + divName).length>0){
        currentModal=$('#'+divName).overlay({
            mask: {color: '#000000'},    
            top:'0px',
            api: true        
        }).load();
    }
}    
function closeModal(){
    if (currentModal){
        if (currentModal.isOpened){
            currentModal.close();
        }
    }
}