Добрый день!
У меня окончательно закончились варианты написания необходимого.
Обобщение:
И так имеем некую HTML-страницу(в ней не прописано модальное окно). При некой ситуации на этой странице у нас должна появляться кнопка и после клика на нее- уникальное модальное окно(генерируемое за счет JS).
Есть JS(создающий само модальное окно, с необходимым содержимым,и кнопка, при нажатии на которую появится окно).
Тут всё хорошо, действительно, все создается, все отображается, НО
Подходим к сути:
с генерируемого таким образом окна не могу сдернуть введеную/выбранную информацию(даже если создать доп кнопку и привязать к ней функцию). А вот если изначально окно прописано в HTML все работает.
Вопрос-проблема:
Что не так? Модальное окно обязательно должно быть изначально прописано в HTML, а не вставленым за счет JS?
Пример кода:PS: сильно не ругайтесь :) Если что-то слишком коряво(я только начала в этом капаться), НО с радостью прочту напутствие/**
* Создание всплывающего окна
* @param idModal id-элемента(при выборе)
* @param nameLink название выбранного пункта
*/
function createModalWindow(idModal, nameLink) {
/**
* modal head
*/
var modalHead = document.createElement("div");
modalHead.setAttribute("class", "modal-header");
var buttonClose = document.createElement("button");
buttonClose.setAttribute("type", "button");
buttonClose.setAttribute("class", "close");
buttonClose.setAttribute("onclick", "testClick");
buttonClose.setAttribute("data-dismiss", "modal");
var symbol = document.createTextNode('×');
buttonClose.appendChild(symbol);
var title = document.createElement("h4");
title.setAttribute("class", "modal-title");
var titleText = document.createTextNode(nameLink);
title.appendChild(titleText);
modalHead.appendChild(buttonClose);
modalHead.appendChild(title);
/**
* modal body
*/
var modalBody = document.createElement("div");
modalBody.setAttribute("class", "modal-body");
modalBody.setAttribute("id", "bodyModal" + idModal);
/**
* modal footer
*/
var modalFooter = document.createElement("div");
modalFooter.setAttribute("class", "modal-footer");
var buttonFooter = document.createElement("button");
buttonFooter.setAttribute("type", "button");
buttonFooter.setAttribute("class", "btn btn-default");
buttonFooter.setAttribute("data-dismiss", "modal");
var textButtonFooter = document.createTextNode("Close");
buttonFooter.appendChild(textButtonFooter);
modalFooter.appendChild(buttonFooter);
/**
* modal content
*
*/
var modalContent = document.createElement("div");
modalContent.setAttribute("class", "modal-content");
modalContent.insertBefore(modalHead, modalContent.childElementCount[0]);
modalContent.insertBefore(modalBody, modalContent.childElementCount[1]);
modalContent.insertBefore(modalFooter, modalContent.childElementCount[2]);
/**
* modal dialog
*
*/
var modalDialog = document.createElement("div");
modalDialog.setAttribute("class", "modal-dialog");
modalDialog.appendChild(modalContent);
/**
* modal window
*
*/
var modalWindow = document.createElement("div");
modalWindow.setAttribute("class", "modal fade");
modalWindow.setAttribute("id", "modalDialog" + idModal);
modalWindow.setAttribute("role", "dialog");
modalWindow.appendChild(modalDialog);
var base = document.getElementById("contain");
base.insertBefore(modalWindow, base.childNodes[0]);
}
/**
* Create link to modal window
* @param selected
* @param id селектора
* @param idModalWindow
*/
function createLink(selected, id, idModalWindow) {
var rowDir = document.createElement("div");
rowDir.setAttribute("class", "row");
rowDir.setAttribute("id", "id" + id);
var sortDiv = document.createElement("div");
sortDiv.setAttribute("class", "col-md-2");
rowDir.appendChild(sortDiv);
var link = document.createElement("button");
link.setAttribute("id", idModalWindow);
link.setAttribute("data-toggle", "modal");
link.setAttribute("data-target", "#" + idModalWindow);
link.setAttribute("class", "btn btn-link btn-md");
var linkText = document.createTextNode(selected);
link.appendChild(linkText);
sortDiv.appendChild(link);
// createModalWindow(id, selected);
var originalDiv = document.getElementById("toolId");
originalDiv.insertBefore(rowDir, originalDiv.childNodes[0]);
}
