наложение jquery не закроется - PullRequest
Новая
       14

наложение jquery не закроется

1 голос
/ 05 мая 2011

Привет У меня возникла проблема с использованием оверлеев jquery, которые не закрываются, когда мой скрипт завершает обработку.

Все, что я делаю, - это отображаю очень простую форму, которая принимает значения при отправке, обрабатывает их в фоновом режиме и добавляет на страницу. Как только это будет сделано, оверлей должен закрыться, однако он просто останется там и не будет работать, пока я не выполню полное обновление страницы.

Мой код Jquery выглядит так: 

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();
        });
    });



}

Все аспекты этого кода отлично работают, кроме того, когда я добираюсь до 

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

Оверлей с формой в нем остается на странице. Существует только один элемент и форма modelInput, которые можно вызывать, поэтому я не уверен, почему это не удается.

Все, что я сделал, это следуйте примеру, который можно найти здесь:

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

Любая помощь с этим будет принята с благодарностью.

Спасибо.

1 Ответ

1 голос
/ 05 мая 2011

Я думаю, вам нужно использовать аргумент api в вашей команде наложения. Я не вижу этого на их примере, но я вспоминаю, что это была моя проблема в прошлом. 

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

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

        closeOnClick: false,
        api: true
    });

Обновление

Вот демоверсия Working , показывающая открытие / закрытие модального окна, а также открытие одного модального из другого. Надеюсь, это поможет.

Это код, который я сейчас использую ... 

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();
        }
    }
}
...