tag:forum.selfhtml.org,2005:/selfEingabe-Fenster – SELFHTML-Forum2013-03-19T18:09:26Zhttps://forum.selfhtml.org/self/2013/mar/16/eingabe-fenster/1574786#m1574786Tom Kristcg@easyo.de2013-03-16T20:14:39Z2013-03-16T20:14:39ZEingabe-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#m1574794mrjerk2013-03-16T22:13:06Z2013-03-16T22:13:06ZEingabe-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#m1574788Matthias Apselwebmaster@billiger-im-urlaub.dehttp://alternativ-tankstelle.de2013-03-17T08:51:25Z2013-03-17T08:51:25ZEingabe-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#m1574787Tom Krist2013-03-17T12:28:38Z2013-03-17T12:28:38ZEingabe-Fenster<p>Danke Euch beiden! Gruß Tom</p>
https://forum.selfhtml.org/self/2013/mar/16/eingabe-fenster/1574789#m1574789Martin Rettbergmail@mret.de2013-03-18T20:24:10Z2013-03-18T20:24:10ZEingabe-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#m1574790Matthias Apselwebmaster@billiger-im-urlaub.dehttp://alternativ-tankstelle.de2013-03-19T09:59:35Z2013-03-19T09:59:35ZEingabe-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#m1574791Matthias Apselwebmaster@billiger-im-urlaub.dehttp://alternativ-tankstelle.de2013-03-19T10:07:57Z2013-03-19T10:07:57ZEingabe-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#m1574792Martin Rettbergmail@mret.de2013-03-19T17:42:55Z2013-03-19T17:42:55ZEingabe-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#m1574793Martin Rettbergmail@mret.de2013-03-19T18:09:26Z2013-03-19T18:09:26ZKorrektur<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>