HTML Kochrezept für Dialog welcher mit Maus verschiebbar ist

[Shadow1701]

Guten Morgen,

ich möchte innerhalb des Browsers ein Fenster öffnen (klick auf link) welches wie ein Fenster unter Windows oder Linux mit der Maus verschiebbar ist. Innerhalb dieses Fensters möchte ich hineinpaken können was ich will. Text, Bilder aber auch Formen mit Textfeldern, Checkboxen usw.

Schließen soll sich das Fenster entweder mit einem submit Button oder mit klick auf ein X rechts oben im Fenster.

Ich habe nicht wirklich eine Ahnung wie das funktionieren soll. Könnt ihr mir Stichworte liefern was ich dazu brauche und wie ich das realisieren kann? Vielleicht kennt jemand von euch den Link zu einem Beispiel?

Vielen Dank.

 

[breedmaster]

https://www.w3schools.com/html/html5_draganddrop.asp

 

[Yuuri]

Lass das "kann ich verschieben wie ein Fenster" usw. weg, das bringt nur Probleme und nutz eins der üblichen Popup-/Modal-Libs.

Bspw. sowas

• https://sweetalert2.github.io/
• https://micromodal.now.sh

Musst halt schaun, welches deine gewünschten Features hat.

 

[chris221177]

Ich finde, das kommt darauf an, was @Shadow1701 bezweckt. Natürlich gibt es das fertig wie @Yuuri schreibt. Für einen professionellen Einsatz, ist so eine Benutzung sicherlich sinnvoll.
Wenn man etwas lernen will, finde ich den Vorschlag von @breedmaster gut. Mit html5 geht das recht einfach, besonders dann, wenn man die Objekte nicht unbedingt in eine drop zone fallen lässt, sondern das DOMElement entsprechend auf der Seite positioniert.

 

[Shadow1701]

Selber machen ist auf jedenfall besser, ich habe jetzt ein einfaches modal zusammengestrickt was funktioniert. Das Ganze muss ich noch "schön machen". Ein Eigenbau, mit Hilfe eurer Links und noch ein paar anderen Quellen.

Auf das Verschieben habe ich verzichtet, ich habe nicht vor mehr als ein Modal zur gleichen Zeit zu öffnen, also brauche ich diese Spielerei nicht wirklich.

Es kann scrollen, mit klicken auf Link und mit klicken außerhalb des Modal geschlossen werden. Escape Taste fehlt noch, wahrscheinlich werde ich aber auf das Schließen mit ESC verzichten, da ich ohne JS auskommen möchte.

Danke für euren input.