Применение эффекта диалога к Inline-Relative Div (без эффекта наведения)

Question

Я пытаюсь поместить диалог jquery в контейнер div относительно другого контейнера div. Другими словами, я ищу, чтобы он появился в строке и чтобы его внешний вид влиял на окружающие его элементы (например: если он скользит в div под ним, он вынужден размещаться).

Я понимаю, что он перестает быть традиционным диалогом, но я не уверен, как еще назвать его, учитывая, что я хотел бы сохранить функции, предоставляемые диалогу jQuery.

Как вы думаете? Любая работа вокруг хаков или решений?

Я хотел бы избежать установки абсолютной позиции любой ценой.

Answer 1

Я уверен, что вы уже решили это, но вот мое решение для потомков:

.dialog({
    appendTo: "#placeholderSpan",
    draggable: false,
    resizable: false
})
.parent()
.css({ position: "relative" })
.position({ my: "left top", at: "left top", of: "#placeholderSpan"});

Я использую новое (по состоянию на 1.10.0) свойство appendTo, но также можно добавить или добавить диалоговое окно при открытии:

.dialog({
    open: function() {
        $(this).parent().prependTo("#placeholderSpan");
    }
});

Это сработало только для меня, если функция позиции пришла в конце, я не мог использовать функцию позиции из опций диалога или позиционировать диалог до установки позиции CSS.

jsFiddle