This page (revision-3) was last changed on 24-Oct-2012 12:04 by Peter Hormanns 

This page was created on 24-Oct-2012 11:57 by Peter Hormanns

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
3 24-Oct-2012 12:04 1 KB Peter Hormanns to previous neue Seite
2 24-Oct-2012 12:00 1 KB Peter Hormanns to previous | to last neue Seite
1 24-Oct-2012 11:57 1 KB Peter Hormanns to last

Page References

Incoming links Outgoing links
JavaScriptPopup...nobody
JavaScriptPopup

Version management

Difference between version and

View first change
!!!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:

{{{
<html>
   <head>
       <title>Test Popup</title>
       <style type="text/css" title="currentStyle">
       @import "test.css";
       </style>
       <script type="text/javascript" language="javascript" src="jquery.min.js"></script>
       <script type="text/javascript" language="javascript" src="test.js"></script>
   </head>
   <body>
       <div id="popup" class="invisible">
           <p>hello world!</p>
           <p class="hier">Close</p>
       </div>
       <div id="content">
           <h1>Intensiv-Kurs JavaScript</h1>
       </div>
       <p class="hier">Click</p>
   </body>
</html>
}}}

!!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() {
   $(".hier").click(function() {
       $("body").toggleClass("backgrey");
       $("#popup").toggleClass("visible");
       $("#popup").toggleClass("invisible");
   });
});
}}}
<<
[{Tag JavaScript Web HTML}]
This page (revision-3) was last changed on 24-Oct-2012 12:04 by Peter Hormanns  Top