Fenster im Vordergrund, Hintergrund abdunkeln

[cja76]

Hallo,
ich bin auf der Suche nach einer Lösung die es mir ermöglicht ein Formular zu senden. Die Ausgaben der Formularverarbeitung sollen dann nicht wie bisher, auf einer neuen Seite stattfinden sondern in einem eigenen DIV. In veralteter Technik würde ich es mal so beschreiben, das Target soll ein anderes Frame sein. Hintergrund ist folgender. Ggf soll das ausgefüllt Formular noch einmal gesendet werden, darum muss es stehen bleiben.
Jetzt habe ich auf mehreren Website schon Effekte gesehen, wo das Verarbeitungsfenster sich über die Website legt und diese einfach abdunkelt (dunkle Farbe mit Transparenz). Nach der Verarbeitung kann man das vordere Fenster schließen und hat wieder das Formular, kann dieses erneut senden.

Wie heißt den der beschrieben Effekt. Möchte das einfach mal googeln. Könnt ihr ggf. auch Tutorials dazu empfehlen.

Danke für die Unterstützung
Christian

[kaminbausatz]

http://jqueryui.com/dialog/#modal-form

[drsoong]

Wie so etwas heisst, weiß ich auch nicht. Es müssten aber zwei Elemente beteiligt sein.

1. Ein absolut positioniertes Element (div, hoher z-index), das die gesamte Arbeitsfläche abdeckt, transparent ist (css opacity) und nach Bedarf ein und ausgeblendet wird
2. Die darüber liegende Arbeitsfläche, die entsprechend positioniert und eingeblendet wird

[jack88]

Wie heißt den der beschrieben Effekt.

Modales Dialogfenster, Modal Box, Modal Window etc.

http://www.w3schools.com/howto/howto_css_modals.asp

[drsoong]

Wobei "Modal Window" jetzt nur die halbe Antwort ist. Der TE spricht zudem von einem sich abdunkelnden, transparenten Background, der Eingaben außerhalb des Modal-Fensters während der Einblendung des Modal-Fensters verhindert.

[jack88]

Wobei "Modal Window" jetzt nur die halbe Antwort ist.

Wieso halbe Antwort?

"Modale Dialoge sperren den Rest der Anwendung (oder sogar der Benutzeroberfläche), solange der Dialog angezeigt wird."

https://de.wikipedia.org/wiki/Dialog...modale_Dialoge

und wie das technisch innerhalb einer Website umgesetzt werden kann, zeigt der Link den ich bereits gepostet habe.

[drsoong]

@jack88: Stimmt. Ich hatte mich nie um eine vollständige Defintion des Begriffs bemüht und sah nur auf der von Dir verlinkten Seite, dass dort nur steht

A modal is a dialog box/popup window that is displayed on top of the current page

Die nachstehend gezeigte technische Umsetzung enthält m. E. keine Sperrung der Anwendung.

[tr0y]

http://semantic-ui.com/modules/modal.html

Das was du willst ist ein Modal mit einem Dimmer im Body-Scope.