Ein kleines Tool-Fenster mit JavaScript erstellen

Erstellen eines kleinen tool-fensterähnlichen Elements mit JavaScript.

Wenn Sie dies zu Benutzerskripten oder ähnlichem hinzufügen, können Sie ein kleines Fenster oben rechts erstellen. Durch Drücken von Schaltflächen können Sie definierte Funktionen ausführen und mehr.

var toolwindow = document.createElement("div");
toolwindow.id = "toolwindow";
toolwindow.innerHTML = [
'<button type="button" style="width: 100%;" name="myFunction" onclick="myFunction()">myFunction</button>',
'<div id="hidetoolwindow" onclick="hidetoolwindow()">hidetoolwindow</div>',
].join("");
document.body.appendChild(toolwindow);

var toolwindowStyle = document.createElement("style");
toolwindowStyle.type = "text/css";
toolwindowStyle.innerHTML = [
"#toolwindow {",
"    position: fixed;",
"    color: #f8f8f8;",
"    z-index: 100000;",
"    top: 10px;",
"    right: 10px;",
"    margin-left: auto;",
"    margin-right: auto;",
"    display: block;",
"    background-color: black;",
"    height: 100px;",
"    width: 200px;",
"    opacity: 0.7;",
"    padding: 10px;",
"}",
"#toolwindow * {",
"font-size: 16px;",
"}",
"#hidetoolwindow {",
"padding-top: 60px;",
"}",
].join("");
document.body.appendChild(toolwindowStyle);

function myFunction(){alert('y')}