jquery覆盖不会关闭

Question

您好，当我的脚本完成处理后，我遇到了使用 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

我们将不胜感激地收到任何帮助。

谢谢。

Answer 1

我认为您需要在叠加命令中使用 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 Demo 显示模式的打开/关闭以及从另一个模式打开一个模式。希望对您有所帮助。

这是我目前正在使用的代码...

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