删除后Jquery ui多个对话框定位？答案

【问题标题】：Jquery ui multiple dialogs positioning after deletion?删除后Jquery ui多个对话框定位？
【发布时间】：2014-10-16 05:38:33
【问题描述】：

我正在使用 jquery ui 对话框在我的 Web 应用程序中创建多个注释。所以有一个添加笔记按钮，点击打开一个笔记（中间的对话框）。

用户可以同时打开多个笔记（对话框），并在每一个上填写内容保存、删除等。

当打开多个笔记并且我开始随机删除一些笔记时会出现问题。因此，在删除时，打开的对话框的定位会受到影响。删除后打开的对话框开始在屏幕上向上移动。

很长一段时间以来，我一直在尝试解决这个问题。请帮忙。

我的JS：

function createNote(note, noteContent, newNote){

        var noteDiv = $('<div> <textarea class="note-textarea" style="width:100%;background-color:#D3D3D3;"></textarea> </div>');

        noteDiv.clone(true).attr("id", noteId)
        .dialog({
            modal : false,
            draggable : false,
            resizable : false,
            open: function(){
                $("#"+ noteId).find('textarea').val(noteContent);
                $("#"+ noteId).find('textarea').css({
                    'height': $("#" + noteId).parent().height()
                });

            }, create: function(){

                // Create Title Textfield inside note top bar
                $("<input type = 'text' placeholder='Title' class='note-title'></input>").appendTo($("#"+ noteId).prev(".ui-dialog-titlebar").find('span'));
                $("#"+ noteId).prev(".ui-dialog-titlebar").find('input').val(noteTitle);

                if(!jQuery.isEmptyObject(note)){

                    createLastModifiedSpan($("#"+ noteId), lastModified);               
                }
            },
            buttons : [ {
                text : "Save",
                disabled: true,
                click : function() {

                ......AJAX CALL to SAVE
            }],
            beforeClose: function(event, ui) {

                if(confirm('Are you sure you want to delete this note?')){
                    $.ajax({
                        type: 'POST',
                        url: "/common/deleteNote.action",
                        data:
                        {                   
                            'note.id.operatorId':$('#operatorId').val(),
                            'note.id.noteId':noteId

                        },
                        success: function(data, textStatus, jqXHR){

                            if(data.result == 'success'){
                                alert('Deleted Successfully');
                                numberOfNotesCreated--;
                            }else
                                alert('Error in Deleting. Contact Admin');
                        },
                        error: function(data){
                            alert("Error in DB!");
                        }   
                    });

                }else
                    return false;

            },
            resize: function(event, ui) {alert('dskjfsf')},
            position:[10,100]
        }); 

        $("#"+ noteId).dialog('open');

        $("#" + noteId).parent().draggable()
        .resizable();/*.position({
               my: "center",
               at: "center",
               of: window
            });*/

        //Fire event on Either textarea or note title
        $("#"+ noteId).find('.note-textarea')
        .add($("#"+ noteId).prev('.ui-dialog-titlebar').find('.note-title')).keydown(function(event) {

            if($(this).val() != '') {
                toggleSaveButton($( "#" + noteId ), "enable");
            }
        });

        if(newNote){
            elementCount++;
            numberOfNotesCreated++;
        }
        prevNoteId = noteId;

    }

编辑：如果我按顺序添加注释说 1、2、3、4 并开始从最近添加的 4、3、2 中删除，但是 positiong 没有问题当我开始随机删除 2、1.. 时，其他笔记的位置就会受到干扰。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-dialog

【解决方案1】：

在解决我的问题的 jquery 表单上找到了这个：

https://forum.jquery.com/topic/bug-when-closing-one-dialog-within-multiple-stacked-dialogs

把这个放在对话框的关闭函数中：

var widget = $(this).dialog("widget"), height = widget.height();
widget
    .nextAll(".ui-dialog").not(widget.get(0))
    .each(function() { var t = $(this); t.css("top", (parseInt(t.css("top")) + height) + "px"); });

【讨论】：