Positionierung und Änderung des Aussehens der Schaltfläche

Question

Ich bin verloren. Ich habe keine Ahnung, was ich tue, also bitte vergib mir, wenn ich etwas Dummes schreibe oder deine Antworten nicht verstehe.

Mein Ziel ist es, eine modale Box nach dem Klicken auf eine Schaltfläche anzuzeigen. Das ist der einfache Teil und das habe ich bereits geschafft, also sag mir.

Grundsätzlich bin ich mit diesem Code:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2

Nun, was ich weiß nicht, wie zu tun:

1) Wie kann ich das Aussehen der Schaltfläche ändern? Kann ich es zu einem Bild ändern? Das einzige, was ich tun könnte, ist ein Bild in den Button (sieht komisch aus), aber nicht ersetzen.

2) Wie ändere ich die Position der Taste? Ich hätte gerne einige Tasten auf der linken Seite des Bildschirms (nicht Website, sondern Bildschirm). Also müsste ich sie auf der linken Seite einstellen, und ich müsste auch die Höhe aller Tasten ändern.

Jetzt änderte ich das Aussehen und die Position des Knopfes, wenn ich etwas anderes versuchte (ein Slideout), also weiß ich, dass es möglich ist. Aber die Codes sind anders und ich weiß nicht, wie ich sie "zusammenführen" soll. Die Zeilen, die in der ersten Zeile funktionieren, funktionieren nicht in der anderen Zeile.

Und ich habe absolut keine Ahnung in welcher Sprache es ist. Ich weiß, dass es diese CreateElement-Sache verwendet, um diesen Knopf zu erstellen, aber ich weiß nicht, wie ich daran etwas ändern soll. Ich habe die ganze W3-Schule und viele Themen auf dieser Seite durchgesehen, aber ich weiß nicht, wie ich dieses Wissen nutzen soll - vielleicht könnten Sie mir helfen. Vielen Dank!

Answer 1

Wenn Sie ein Bild zum Öffnen des Modals verwenden möchten, sollten Sie das Schaltflächen-Tag nicht verwenden. Hängen Sie einfach Ihr Ereignis an einen IMG an.

den Beispielcode verwenden, ersetzen:

<button id="myBtn">Open Modal</button> 

mit

<img id="myImg"></img> 

und attch das Click-Ereignis auf "myImg"

var img = document.getElementById("myImg"); 
img.onclick = function() { 
    modal.style.display = "block"; 
} 

Neupositionierung wird ein wenig mehr sein schwer zu beantworten, ohne Ihren vollständigen Code zu sehen. W3Schools hat eine gute Einführung in CSS für Anfänger, also würde ich dort anfangen.