Create popup DOM

Question

I am creating a new page popup through the Javascript code. The page does not exist, so I want it to be just a temporary page. Example:

    if (option == 3){
        var myPopup = window.open("", "", "width=350, height=300");
        myPopup.addEventListener('load', function() {
            console.log("received load event");
        }, true);
    }   

This popup only appears through a checkbox. How can I add elements to the page, such as input text, Buttons, etc

Answer 1

akm, if you really need to open a new window, I believe it is best to create a document in memory with the desired HTML:

var tmplPopUp = document.getElementById("tmplPopUp");
var abrirPopUp = document.getElementById("abrirPopUp");

abrirPopUp.addEventListener("click", function () {
  var blobPopUp = new Blob([tmplPopUp.innerHTML], { type: 'text/html' });
  var urlPopUp = URL.createObjectURL(blobPopUp);
  var popUp = window.open(urlPopUp, "", "width=350, height=300");
  
  popUp.addEventListener("load", function (event) {   
    var label1 = popUp.document.getElementById("label01");
    var label2 = popUp.document.getElementById("label02");
    var enviar = popUp.document.getElementById("enviar");    
    
    console.log(label1, label2, enviar);
  });  
});

<input id="abrirPopUp" type="button" value="Abrir PopUp" />

<template id="tmplPopUp">
  <div>
    <label>
      Label 01:
      <input id="label01" type="text" />
    </label>
  </div>
  <div>
    <label>
      Label 02:
      <input id="label02" type="text" />
    </label>
  </div>
  <div>
    <label>
      <input id="enviar" type="button" value="Enviar" />
    </label>
  </div>
</template>

The above code will not work due to an OS limitation, you can see the same working on Jsfiddle

If you need to add elements in the Popup after it is loaded, you can manipulate the document of the same.

var tmplPopUp = document.getElementById("tmplPopUp");
var abrirPopUp = document.getElementById("abrirPopUp");

abrirPopUp.addEventListener("click", function () {
  var blobPopUp = new Blob([tmplPopUp.innerHTML], { type: 'text/html' });
  var urlPopUp = URL.createObjectURL(blobPopUp);
  var popUp = window.open(urlPopUp, "", "width=350, height=300");
  
  popUp.addEventListener("load", function (event) {   
    var label1 = popUp.document.getElementById("label01");
    var label2 = popUp.document.getElementById("label02");
    var enviar = popUp.document.getElementById("enviar");    
    
    var label3 = {};
    label3.div = popUp.document.createElement("div");
    label3.label = popUp.document.createElement("label");
    label3.textNode = popUp.document.createTextNode("Label 03: ");
    label3.input = popUp.document.createElement("input");    
    
    label3.input.id = "label03";
    label3.input.type = "text";
    label3.label.appendChild(label3.textNode);
    label3.label.appendChild(label3.input);
    label3.div.appendChild(label3.label);
    enviar.parentNode.insertBefore(label3.div, enviar);
    
    var label3 = popUp.document.getElementById("label03");
    console.log(label1, label2, label3, enviar);
  });  
});

<input id="abrirPopUp" type="button" value="Abrir PopUp" />

<template id="tmplPopUp">
  <div>
    <label>
      Label 01:
      <input id="label01" type="text" />
    </label>
  </div>
  <div>
    <label>
      Label 02:
      <input id="label02" type="text" />
    </label>
  </div>
  <div>
    <label>
      <input id="enviar" type="button" value="Enviar" />
    </label>
  </div>
</template>

In the above example, I added a third input... again, if you want to see the same working, you will need to check the Jsfiddle