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

我认为您需要在overlay命令中使用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();
        }
    }
}

jquery overlay不会关闭

1 个答案: