javascript - 主干形式 : how to show the jquery dialog for list-item editing over a colorbox dialog?

Question

我大家，我想我的问题很微不足道，但我陷入困境，我需要分享我的疑虑。

我使用backbone.js 和backbone-form(感谢 Charles Davison 创建了这个出色的工具)。

我在颜色框对话框中打开主干表单，它工作正常。代码如下:

        [...]
        this.form=new Backbone.Form({
            data: json_infos.RI, //Data to populate the form with
            schema: self.getSchema(json_infos.RI)
            }).render();
        $(this.form.el).prepend("<center><b>"+self.renderIMG()+self.model.get('ri_name')+"</b></center>").append('<div id="updatebtn">OK, Save all Changes!</div>');
        $(this.form.el).delegate('#updatebtn','click',  this.saveRI);

        $.colorbox({
            html:self.form.el,
            transition: "elastic",
            speed:400,
            scrolling: true,
            width: "650px",
            height: "600px"
            });
        },

在包含表单的弹出框中，我遇到了问题:当我想添加/删除/更新列表中的元素时，会打开另一个 jquery 对话框，但不在 COLORBOX 上方。

我阅读了很多关于 DOM 遍历、选择器的 jquery 文档，并且我还个性化了我认为应该修改的代码，它位于 jquery-ui-editors.js 插件中的第 348 行，“openEditor”函数

    openEditor: function(data, callback) {
        var self = this,
            schema = this.schema,
            listType = schema.listType || 'Text';

        var editor = Form.helpers.createEditor(listType, {
            key: '',
            schema: schema,
            value: data,
         }).render();


        var container = $(this.editorTemplate());

        //~ $(self.el).append($('.bbf-list-editor', container).html(editor.el));
        $('.bbf-list-editor', container).html(editor.el);

        var close = function() {
            container.dialog('close');

            editor.remove();
            container.remove();
        };


        $(container).dialog({
            resizable:  false,
            modal:      true,
            width:      500,
            title:      data ? 'Edit item' : 'New item',
            buttons: {
                'OK': function() {
                    callback(editor.getValue());
                    close();
                }, 
                'Cancel': close
            }
        });
    },

在后面的代码中，我不明白我们在哪里以及如何对 javascript 说“请在 body 标记下创建元素并将其弹出”。

确实，我需要不是在“主体”上打开它，而是在触发对话框的元素的父元素上打开它。

有人可以帮我吗？如果您需要更多详细信息，我很乐意添加它们。提前致谢。

------------更新------------------

按照 Sander 的建议，我使用 z-index 解决了这个问题。

必须修改 z-index 不在 CSS 中，而是在打开弹出窗口的代码部分进行修改。所以只需添加

zIndex:     100000000, 

在 jquery-ui-editors 第 371 行的 jquery-ui 弹出选项中。

Answer 1

按照 Sander 的建议，我使用 z-index 解决了这个问题。

必须在打开弹出窗口的代码部分而不是在 CSS 中修改 z-index。所以只需添加

zIndex:100000000，在 jquery-ui-editors 第 371 行的 jquery-ui 弹出选项中。