Блог

Привет, у меня возникла проблема с использованием оверлеев 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   "amp;role="   role   "amp;title="   title   "amp;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

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

Спасибо.

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

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

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

        closeOnClick: false,
        api: true
    });
  

Обновить

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

Это код, который я использую в настоящее время…

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