Я использую этот простой пример модального диалога здесь: http://jqueryui.com/demos/dialog/modal-form.html
Когда страница загружается, jQuery удаляет диалоговое окно div из DOM. Когда кнопка нажата, чтобы открыть диалог, jQuery добавляет диалог div в конец элемента body.
Я хочу добавить его к определенному div, а не к телу. Причина в том, что у меня большая форма на странице, а в диалоговом окне - один входной файл (без отдельной формы). Я хочу сохранить свой файл в диалоговом окне, в том же виде, что и остальные поля на странице (которые не находятся в диалоговом окне).
Можно ли добавить диалог к данному элементу или элементу?
Просто решил это сам вчера. То, как я решил, было вставить пустой div внизу формы (<div id="bottomOfForm"></div>
), а затем, закрыв диалог, переместите его содержимое в этот div.
В моем случае код был примерно таким:
// Setup up dialogue box that contains some form fields:
$j("#myDialogue").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Submit": function() {
// Move to main form so fields get included:
$j(this).parent().prependTo($j("#bottomOfForm"));
// Submit the main form:
$j('#mainForm').submit();
},
Cancel: function() {
$j(this).dialog( "close" );
}
}
});
close
мероприятие отлично сработало для меня!
Это старый поток, но в случае, если кто-то (например, я) натолкнется на него в будущем, я думаю, стоит отметить, что с 1.10.0 в jQuery UI предлагается опция appendTo:
$("#myDialogue").dialog({
appendTo: "#DesiredDivID"
});
Такие ModalDialogs предназначены для того, чтобы не вмешиваться в существующую DOM, поэтому только они добавляются в body
, а не в настройку, куда добавлять.
Для вашего конкретного использования я бы предложил найти form inputs
из диалогового окна, когда он закрыт, клонировать и добавлять их в вашу форму. Вы можете конвертировать type=text
в type=hidden
, когда вы вставляете их в свою форму. Таким образом, вы можете получить эти данные
с обычной формой submit.
Счастливое кодирование.