tag:forum.selfhtml.org,2005:/self Eingabe-Fenster – SELFHTML-Forum 2013-03-19T18:09:26Z https://forum.selfhtml.org/self/2013/mar/16/eingabe-fenster/1574786#m1574786 Tom Krist cg@easyo.de 2013-03-16T20:14:39Z 2013-03-16T20:14:39Z Eingabe-Fenster <p>Kann mir jemand ein paar Stichworte geben zu den Technologien, mit denen man Eingabe-Fenster erzeugen kann, bei deren Aufruf die Ausgangsseite transparent als Hintergrund durchscheint, so wie im Bild?</p> <p><img src="http://www.easyofficeweb.de/fenster.jpg" alt="" loading="lazy"></p> <p>Gruß Tom</p> https://forum.selfhtml.org/self/2013/mar/16/eingabe-fenster/1574794#m1574794 mrjerk 2013-03-16T22:13:06Z 2013-03-16T22:13:06Z Eingabe-Fenster <p>Hallo,</p> <p>Transparente Layer oder <a href="http://jquerytools.org/demos/overlay/modal-dialog.html" rel="nofollow noopener noreferrer">Modal Dialog</a> würde ich mal als Suchbegriffe verwenden.</p> <p>In Verbindung mit Begriffen wie CSS und JavaScript müsstest Du schnell Tutorials & Demos finden, mit denen Du weiter kommst.</p> <p>Hoffe, das bringt Dich weiter.</p> <p>Viele Grüße,<br> Jörg</p> https://forum.selfhtml.org/self/2013/mar/16/eingabe-fenster/1574788#m1574788 Matthias Apsel webmaster@billiger-im-urlaub.de http://alternativ-tankstelle.de 2013-03-17T08:51:25Z 2013-03-17T08:51:25Z Eingabe-Fenster <p>Om nah hoo pez nyeetz, Tom Krist!</p> <blockquote> <p>Kann mir jemand ein paar Stichworte geben zu den Technologien, mit denen man Eingabe-Fenster erzeugen kann, bei deren Aufruf die Ausgangsseite transparent als Hintergrund durchscheint, so wie im Bild?</p> </blockquote> <p>So, wie du die Frage formulierst, klingt es, als ob du Zauberei erwartest. In den meisten Fällen ist es jedoch eine der folgenden Strukturen:</p> <h5>1</h5><pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>element</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>element</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <h5>2</h5><pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>element</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>element</span><span class="token punctuation">></span></span> </code></pre> <p>das Element ist beispielsweise ein ganz normales Formular und das div hat folgende CSS-Eigenschaften:</p> <pre><code class="block language-css">[<span class="token property">link</span><span class="token punctuation">:</span><span class="token property">http</span><span class="token punctuation">:</span>//selfhtml.apsel-mv.de/position/position.html<span class="token atrule"><span class="token rule">@title</span>=<span class="token property">position</span><span class="token punctuation">:</span> fixed]<span class="token punctuation">;</span></span> <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> [<span class="token property">link</span><span class="token punctuation">:</span><span class="token property">http</span><span class="token punctuation">:</span>//wiki.selfhtml.org/wiki/<span class="token property">Referenz</span><span class="token punctuation">:</span>CSS/Farben<span class="token atrule"><span class="token rule">@title</span>=<span class="token function">rgba</span><span class="token punctuation">(</span>196<span class="token punctuation">,</span> 196<span class="token punctuation">,</span> 196<span class="token punctuation">,</span> .4<span class="token punctuation">)</span>]<span class="token punctuation">;</span></span> <span class="token comment">/* oder [link:http://wiki.selfhtml.org/wiki/Opacity@title=opacity]: .4 */</span> </code></pre> <p>Das Einblenden kann dann via Javascript oder auch über CSS (<a href="https://forum.selfhtml.org/?t=213014&m=1455911" rel="noopener noreferrer">Lösungsidee</a>) geschehen. Welche Variante du verwendest, liegt an deiner Zielgruppe. In einem technik-affinen Hintergrund darfst du wohl von modernen Browsern ausgehen und kannst auf das JavaScript verzichten.</p> <p>Solltest du hingegen allgemeines Publikum, auch mit nicht ganz so modernen Browsern, erwarten, würde ich nur das JavaScript anbieten.</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> https://forum.selfhtml.org/self/2013/mar/16/eingabe-fenster/1574787#m1574787 Tom Krist 2013-03-17T12:28:38Z 2013-03-17T12:28:38Z Eingabe-Fenster <p>Danke Euch beiden! Gruß Tom</p> https://forum.selfhtml.org/self/2013/mar/16/eingabe-fenster/1574789#m1574789 Martin Rettberg mail@mret.de 2013-03-18T20:24:10Z 2013-03-18T20:24:10Z Eingabe-Fenster <p>Hi,</p> <p>möchte man das extra div einsparen, könnte man den selben Effekt auch mit</p> <pre><code class="block language-css"> <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 0 0 9999px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>.4<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>oder</p> <pre><code class="block language-css"><span class="token property">outline</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>.4<span class="token punctuation">)</span> solid 9999px<span class="token punctuation">;</span> </code></pre> <p>erreichen.</p> <p>Martin</p> https://forum.selfhtml.org/self/2013/mar/16/eingabe-fenster/1574790#m1574790 Matthias Apsel webmaster@billiger-im-urlaub.de http://alternativ-tankstelle.de 2013-03-19T09:59:35Z 2013-03-19T09:59:35Z Eingabe-Fenster <p>Om nah hoo pez nyeetz, Martin Rettberg!</p> <blockquote> <p>möchte man das extra div einsparen, könnte man den selben Effekt auch mit</p> <pre><code class="block language-css"></code></pre> </blockquote> <blockquote> <p>box-shadow: 0 0 0 9999px rgba(0,0,0,.4);</p> </blockquote> <pre><code class="block"> > oder > ~~~css outline: rgba(0,0,0,.4) solid 9999px; > </code></pre> <blockquote> <p>erreichen.</p> </blockquote> <p>cool.</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> https://forum.selfhtml.org/self/2013/mar/16/eingabe-fenster/1574791#m1574791 Matthias Apsel webmaster@billiger-im-urlaub.de http://alternativ-tankstelle.de 2013-03-19T10:07:57Z 2013-03-19T10:07:57Z Eingabe-Fenster <p>Om nah hoo pez nyeetz, Matthias Apsel!</p> <blockquote> <p>cool.</p> </blockquote> <p>Unter Umständen doch nicht ganz so cool. Die Seite unter dem Schatten bzw. der Außenlinie bleibt bedienbar, das heißt, Links anklickbar, Formulare ausfüllbar, was vielleicht nicht erwünscht ist.</p> <p>Matthias</p> <div class="signature">-- <br> 1/z ist kein Blatt Papier.<br> <img src="http://www.billiger-im-urlaub.de/kreis_sw.gif" alt="" loading="lazy"><br> </div> https://forum.selfhtml.org/self/2013/mar/16/eingabe-fenster/1574792#m1574792 Martin Rettberg mail@mret.de 2013-03-19T17:42:55Z 2013-03-19T17:42:55Z Eingabe-Fenster <p>Hi,</p> <blockquote> <p>Unter Umständen doch nicht ganz so cool. Die Seite unter dem Schatten bzw. der Außenlinie bleibt bedienbar, das heißt, Links anklickbar, Formulare ausfüllbar, was vielleicht nicht erwünscht ist.</p> </blockquote> <p>hoppla!<br> Ich habe nur darauf geachtet, dass der Seiteninhalt visuell hinter dem Element liegt.<br> Mit :before und :after kann man offenbar auch nicht tricksen, weil die sich ja auf den Inhalt des Elements und nicht das Element selbst beziehen; meine letzte Hoffnung starb dann mit <a href="http://www.w3.org/TR/2003/WD-css3-content-20030514/#wrapping" rel="nofollow noopener noreferrer">::outline</a>, was seit 2003 unbenutzt in der Ecke rumliegt.</p> <p>Martin</p> https://forum.selfhtml.org/self/2013/mar/16/eingabe-fenster/1574793#m1574793 Martin Rettberg mail@mret.de 2013-03-19T18:09:26Z 2013-03-19T18:09:26Z Korrektur <p>Hi,</p> <blockquote> <p>meine letzte Hoffnung starb dann mit <a href="http://www.w3.org/TR/2003/WD-css3-content-20030514/#wrapping" rel="nofollow noopener noreferrer">::outline</a></p> </blockquote> <p>natürlich meine ich ::outside und nicht ::outline ;)</p> <p>Martin</p>