JQuery ui несколько диалогов позиционирования после удаления?

Question

Я использую диалоговое окно jquery ui для создания нескольких заметок в своем веб-приложении. Таким образом, есть кнопка добавления заметки, которая нажимает, чтобы открыть заметку (диалоговое окно в центре).

Пользователь может открывать несколько заметок (диалогов) вместе и заполнять содержимое, удалять и т. Д. На каждом.

Проблема возникает при открытии нескольких заметок, и я запускаю случайное удаление. Таким образом, при удалении происходит позиционирование позиционирования. Открытые диалоги после удаления любого запуска, перемещающегося вверх по экрану.

Я пытался решить это с довольно долгого времени. Помощь Plz.

Мой 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: Если добавить примечания в последовательности говорят 1, 2, 3, 4 и начать удаление из недавно добавленных как 4, 3, 2 .. positiong не дает проблемы, однако, когда я начинаю удалять случайным образом 2, 1 .., то другие примечания, возникающие, нарушаются.

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