Jquery ui multiple dialogs positioning after deletion?

Question

I am using jquery ui Dialog box to create multiple notes in my Web Application. So there is a add-note button which clicks to open a note (dialog box at center).

User can open multiple notes (dialogs) together and fill content save, delete, etc on each.

Problem arises when multiple notes are opened and I start deleting some randomly. So on deletion the positioning of the opened dialog gets affected. The opened dialogs after deletion of any start moving upwards on the screen.

I have been trying to solve this from quite some time. Plz help.

My 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;

    }

EDIT : If I add notes in sequence say 1, 2, 3, 4 and start deleting from the recently added like 4, 3, 2.. the positiong does not give a problem, however when I start deleting randomly 2, 1.. then the other notes postioning gets disturbed.

Answer 1

Found this on the jquery form which solved my problem :

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

Put this in close function of the dialog:

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