I try create a modal box for my Extention. I have a html5 code
<dialog>
<p>Window</p>
<button id="close">Close</button>
</dialog>
<button id="show">Open Modal Box</button>
and JS code
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
dialog.show();
};
document.querySelector('#close').onclick = function() {
dialog.close();
};
But in my Extention not run my code
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();
};
}
How make html code in js ?
add a html container to store everything, and then create elements and append them accordingly by referencing them
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>