

<pre>
!!!Popup mit ~JavaScript und CSS

eigentlich ist es ganz einfach. Aber immer wieder probiere ich herum, wenn ich dynamisch ein Popup auf einer Webseite anzeigen will.

Deshalb hier ein paar Code-Schnipsel  

!!HTML

eine {{index.html}}, die alles zusammenhält:

{{{
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Test Popup&lt;/title&gt;
        &lt;style type=&quot;text/css&quot; title=&quot;currentStyle&quot;&gt;
        @import &quot;test.css&quot;; 
        &lt;/style&gt;
        &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot; language=&quot;javascript&quot; src=&quot;test.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id=&quot;popup&quot; class=&quot;invisible&quot;&gt;
            &lt;p&gt;hello world!&lt;/p&gt;
            &lt;p class=&quot;hier&quot;&gt;Close&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id=&quot;content&quot;&gt;
            &lt;h1&gt;Intensiv-Kurs JavaScript&lt;/h1&gt;
        &lt;/div&gt;
        &lt;p class=&quot;hier&quot;&gt;Click&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
}}}

!!CSS Styles

Das {{test.css}} dazu:

{{{
.visible { 
    display:block; 
    position:absolute; 
    top:40px; left:60px; 
    border: black solid 1px; 
    background: white; 
    margin: 2px;
    padding: 8px;
}
.invisible { 
    display:none; 
}
.backgrey {
    background: grey; 
}
p,div {
    margin: 1px;
    padding: 1px;
}
}}}

!!~JavaScript

Zum Schluss die {{test.js}}-Datei, ein einfacher Click-Handler in ~JavaScript (mit JQuery):

{{{
$(document).ready(function() {
    $(&quot;.hier&quot;).click(function() {
        $(&quot;body&quot;).toggleClass(&quot;backgrey&quot;);
        $(&quot;#popup&quot;).toggleClass(&quot;visible&quot;);
        $(&quot;#popup&quot;).toggleClass(&quot;invisible&quot;);
    });
});
}}}

[{Tag JavaScript Web HTML}]

</pre>