Intento crear un cuadro modal para mi Extensión. tengo un codigo html5
<dialog> <p>Window</p> <button id="close">Close</button> </dialog> <button id="show">Open Modal Box</button>y código JS
var dialog = document.querySelector('dialog'); document.querySelector('#show').onclick = function() { dialog.show(); }; document.querySelector('#close').onclick = function() { dialog.close(); };Pero en mi Extensión no ejecuta mi código
function Window_app(){ var myDiv = document.createElement('dialog'); var myP = document.createElement ('p') var myPText = document.createTextNode("Это окно, которое сделано на html5 и javascript"); var buttonClose = document.createElement('button'); buttonClose.id = ('close'); var buttonShow = document.createElement('button'); buttonShow.id = ('show'); var dialog = document.querySelector('dialog'); document.querySelector('#show').onclick = function() { dialog.show(); }; document.querySelector('#close').onclick = function() { dialog.close(); }; }¿Cómo hacer código html en js?
agregue un contenedor html para almacenar todo, y luego cree elementos y agréguelos en consecuencia haciendo referencia a ellos
function Window_app() { var dialog = document.createElement('dialog'); var myP = document.createElement('p') var myPText = document.createTextNode("Это окно, которое сделано на html5 и javascript"); var buttonClose = document.createElement('button'); buttonClose.id = ('close'); buttonClose.appendChild(document.createTextNode("закрыть")); var buttonShow = document.createElement('button'); buttonShow.appendChild(document.createTextNode("открыть")); buttonShow.id = ('show'); myP.appendChild(myPText); var container = document.querySelector('#dialog-container'); dialog.appendChild(myP); container.appendChild(dialog); dialog.appendChild(buttonClose); container.appendChild(buttonShow); buttonShow.onclick = function() { dialog.show(); }; buttonClose.onclick = function() { dialog.close(); }; } Window_app() <div id="dialog-container"></div>