Bootstrap - Why is a modal a clickable "blank"?

Question

JavaScript

Good afternoon!
I have finally run out of options for writing the necessary.
Generalization:
And so we have a certain HTML page (the modal window is not registered in it). In some situation, a button should appear on this page, and after clicking on it, a unique modal window (generated by JS).
There is JS (creating the modal window itself, with the necessary content, and a button, when clicked, the window will appear).
Everything is fine here, indeed, everything is created, everything is displayed, BUT Let's get
to the point:
I can’t pull off the entered / selected information from the window generated in this way (even if I create an additional button and bind a function to it). But if the window is initially written in HTML, everything works.
Question-Problem:
What's wrong? The modal window must be initially written in HTML, and not inserted at the expense of JS?
Code example:
PS: don't swear too much :) If something is too clumsy (I just started to dig into it), BUT I will gladly read parting words

/**
 * Создание всплывающего окна
 * @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]);
}

Answer 1

ahk

Does the modal window have to be originally written in HTML?

NO, not necessarily, you can put it right before clicking on the "open" button.
There are errors in the code in the example

link.setAttribute("id", idModalWindow);
link.setAttribute("data-toggle", "modal");
link.setAttribute("data-target", "#" + idModalWindow);

A link is created with ID=idModalWindow and the data-target=#idModalWindow attribute - that is, it is assumed that this link will open a window with id = idModalWindow - that is, there will be two elements on the page with id=idModalWindow (button and window)
The example will work if ( there may be other options):
1. When creating a window, it will be set as the id of what is front as the idModal parameter (which is the login) 2. In the link that opens the window, we give a different id than the idModalWindow parameter (for example, 'link-' + id) 3. When clicking on the link, add an html modal window (after creating the link, add it to the eventListener)

link.addEventListener('click', function() {
        createModalWindow(idModalWindow, 'TITLE');
}, false);

4. We call createLink - with the necessary parameters (make sure that the page has #container and #toolId blocks) After closing the window, the page can be deleted. PS Like Adamos , I advise you to use jQuery, and as Nikita Polevoy wrote in his comments. you make great examples on jsfiddle or on codepen .

Answer 2

Tip: jQuery. Bootstrap uses it anyway.
And footcloths turn ...