• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Eigene vor- und zurück-Buttons in Dialogfenstern (modale Dialoge)

Hallo noch mal,

ich möchte folgendes in meine Seite einbauen.
Ich habe ein Parent-Fenster und möchte von diesem aus ein Dialog-Fenster (dialog 1) öffnen, welches ein Formular und einen "Vor" und "Zurück" Button enthält.
Klicke ich auf den "Vor"-Button, dann soll sich "dialog 1" schließen und "dialog 2" öffnen. Klicke ich auf den Button "Zurück", dann schließt sich das Fenster "dialog 2" und es öffnet sich wieder das Fenster "dialog 1".

Klickt man im Fenster "dialog 2" auf den Button "Vor", dann öffnet sich das Fenster "dialog 3" und das Fenster "dialog 2" soll sich schließen. ... usw.

Dies soll mit beliebig vielen Fenstern möglich sein.

Warum Dialog-Fenster?

Ich möchte damit erreichen, dass das parent-Fenster im Hintergrund nicht mehr focussiert werden kann. Der Focus soll immer auf dem jeweils geöffneten Dialog-Fenstern sein.
Darüber hinaus soll das parent-Fenster auch nicht beschreibbar oder gar veränderbar sein.
Erst wenn das gerade geöffnete Dialog-Fenster wieder geschlossen wird, dann soll das parent-Fenster wieder beschreibbar oder überhaupt nutzbar sein.

Ist sowas möglich????
Welche Methoden oder Möglichkeiten gibt es?

Im Voraus vielen Dank für Eure Hilfe.

Viele Grüße aus Köln

Hier noch ein Anhang mit meiner Vorstellung
showModalDialog.png
 
Ich würde nicht mit verschiedene Fenstern arbeiten, dass ist viel zu nervig für den Benutzer. Ich würde verschiedene Element ein bzw. ausblenden.

Beispiel:
Element 1 (Elternelement) enthält die initialen Daten -> Benutzer klickt auf Weiter -> Element 1 fährt zu oder wird ausgeblendet und Element 2 erscheint -> Benutzer klickt auf zurück -> Element 2 verschwindet und Element 1 erscheint usw.


Außerdem kannst du (glaub ich) dem Benutzer garnicht "verbieten" ein anderes Fenster anzuklicken. Das wäre ja auch ziemlich treist. Wenn ich auf eine Seite komme, auf einmal 3,4,5 Fenster aufgehen und ich im orginal Fenster, wo ich vielleicht noch mehrere Tabs auf habe nichts mehr tun könnte. Erst wenn ich alle tausend anderen Fenster geschlossen habe, geht wieder was. Die Seite würde ich genau einmal besuchen, dann nie wieder...
 
Zuletzt bearbeitet:
Wenn die verschiedenen Formulare genau gleich groß wären, wäre das eine super Idee aber einerseits habe ich kleine Formulare und andererseits ganz große.
Das erschwert die ganze Sache, nehme ich an.
 
Habe gerade mal versucht ein großes und komplexes Formular (nur das form-element, ohne jegliche js-skripte oder php etc) einzubinden. Aber es funktioniert nicht.
Scheint nur mit großem Aufwand handlebar zu sein.
 
@Julian: Na klaro habe ich es korrekt eingebunden. Habe es ja auch schon vorher mit kurzen Strings versucht und es hat auch damit funktioniert.
Nur wie gesagt.....meine Skripte sind ja schon fertige funktionsfähige Skripte, die ich schon sehr lange am Laufen habe.
Binde ich diese mit z.B. "includes('php-skript_1.php');" ein, dann funktioniert es nicht.

Wie oben schon erwähnt habe ich sie auch ohne includes() und php etc. in das DIV-Element eingebunden, aber ohne Erfolg. Vielleicht habe ich irgendwas vergessen oder übersehen.

Ich versuche es aber weiter. Muss gerade noch eine kleines PDF-Problemchen lösen. Dann mache ich damit weiter.

Aber vorab noch eine Frage:

Gibt es nicht die Möglichkeit einen durchsichtigen Schleier über das parent-Fenster zu legen, sodass man darauf keinen Zugriff mehr hat?

Wenn das möglich sein sollte, dann wäre ich Euch sehr verbunden wenn Ihr mir zeigen würdet, wie ich das realisiere.

Besten Dank!
 
centauros schrieb:
Gibt es nicht die Möglichkeit einen durchsichtigen Schleier über das parent-Fenster zu legen, sodass man darauf keinen Zugriff mehr hat?!
Zum Vergrößern anklicken....

Also zumindest über die Website kannst du einen Schleier legen. Als Gedankenanstoß: ich täte es irgendwie so ähnlich machen:
HTML: 
<!doctype html>
<html>
 <head>
   <title>Fenster öffnen und Layer über altes legen</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <style>
   #layer {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #000000;
     opacity: 0.5;
     filter:alpha(opacity=50);
   }
   </style>
   <script>
   function oeffne_fenster(seite, fenstertitel, layer_id){
     document.getElementById(layer_id).style.display = block;
     neues_fenster = window.open(seite, fenstertitel, "width=500,height=500");
     neues_fenster.focus();
   }
   </script>
 </head>
 <body>
   <div id="layer" style="display:none">
     <!-- Inhalt -->
     <input type="button" value="Neues Fenster öffnen" onclick="oeffne_fenster('seite1.html', 'Seite 1', 'layer')">
   </div>
</body>
</html>
 
Zuletzt bearbeitet:
so unterdrückst du ja das Öffnen der seite1.html.
Zudem zeigst Du den Button nicht an, der zum Öffnen der seite1.html nötig ist.

Auch wenn Du den Button sichtbar machst, unterdrückst du durch den Schleier das Öffnen der Seite1.html.
 
centauros schrieb:
so unterdrückst du ja das Öffnen der seite1.html.
Zudem zeigst Du den Button nicht an, der zum Öffnen der seite1.html nötig ist.

Auch wenn Du den Button sichtbar machst, unterdrückst du durch den Schleier das Öffnen der Seite1.html.
Zum Vergrößern anklicken....

Ähm... Irgendwie versteh ich dich nicht... Was wird da bitte unterdrückt oder nicht angezeigt???
 
Sorry.....habe mich nicht ganz richtig ausgedrückt. Ich fange mal mit meinem Browser an.
Ich benutze den Firefox v27.0.1.

Der Firefox zeigt mir eine weiße Seite an. Das war's.

Der Code enthält aber im DIV-Element einen Button. Dieses DIV-Element ist ausgeblendet. Daher sehe ich den Button auch nicht.

Vielleicht liegt es ja da dran?!
 
centauros schrieb:
Der Firefox zeigt mir eine weiße Seite an. Das war's.
Der Code enthält aber im DIV-Element einen Button. Dieses DIV-Element ist ausgeblendet. Daher sehe ich den Button auch nicht.
Zum Vergrößern anklicken....

Stimmt, das war ein Denkfehler. Denn da ja der div ausgeblendet wird, wird auch der innenliegende Inhalt ausgeblendet.
 
Eine Lösung wäre, die ID nach dem Klick zu ändern, damit sich der Style erst dann auswirkt:
HTML: 
<script>
   function oeffne_fenster(seite, fenstertitel, layer_id){
     var id = document.getElementById(layer_id);
     id.id = "layer";
     neues_fenster = window.open(seite, fenstertitel, "width=500,height=500");
     neues_fenster.focus();
   }
   </script>
 </head>
 <body>
   <div id="div-vorher">
     <!-- Inhalt -->
     <input type="button" value="Neues Fenster öffnen" onclick="oeffne_fenster('seite1.html', 'Seite 1', 'div-vorher')">
   </div>
 
Danke für die Korrektur. :)

Das Ganze hat jedoch einen kleinen Nachteil.

1.) Wenn ich das PopUp-Fenster öffne und auf das darunter liegende vom Schleier bedeckte Fenster klicke, dann verschwindet das PopUp in den Hintergrund.
Das sollte es nicht. Es sollte wie ein Dialogfenster reagieren. Wenn man also auf das verschleierte Fenster klickt, dann soll der Focus trotzdem auf den PopUp bleiben und der PopUp soll immer im Vordergrund stehen bleiben.

Wenn ich den PopUp dann per z.B. Button schließe, dann soll der Schleier verschwinden. Ok....das kriege ich dann auch selbst noch hin. ;)
 
centauros schrieb:
Wenn ich das PopUp-Fenster öffne und auf das darunter liegende vom Schleier bedeckte Fenster klicke, dann verschwindet das PopUp in den Hintergrund.
Zum Vergrößern anklicken....

Probier mal im Elternfenster
Code: 
<body onmouseover="fenstertitel.focus()">
Wobei "fenstertitel" natürlich auch der Name des neu geöffneten Pop-Up sein muss...
 
schon klar.
Hatte ich schon versucht aber das hat auch nicht geklappt.

Kennst Du die Funktion showModalDialog() ?

Genauso soll es sein.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben