Popups ohne Popups

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • Popups ohne Popups

      [FONT="Verdana"]hi,

      im grunde ist es ja total einfach. window.open() und alles wird gut ..
      naja gäbe es nicht popupblocker und die tatsache das popups einfach
      nur nervig sind ^^


      die folgende methode benutzt in der kleinsten ausbaustufe javascript und etwas css.
      das ganze lässt sich noch um AJAX komponenten erweitern, was hier aber
      keine rolle spielen soll, AJAX tutorials gibts wie sand am meer, oder öfter.

      die idee hinter dem ganzen ist recht einfach, man nehme ein div-element
      und missbrauche es als Popup-"fenster".
      was ich in das fenster schreibe is erstmal egal, im folgenden beispiel steht
      nur sinnloser text drin. man kann aber jedes html element darin unterbringen,
      oder auch den inhalt des divs per AJAX nachladen.

      zunächst basteln wir uns mal ein kleines HTML-Beispiel, in dem wir irgendein
      html-element anlegen auf das wir dann klicken um das popup zu öffnen.

      HTML-Quellcode

      1. <?xml version="1.0"?>
      2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      3. <html>
      4. <head>
      5. <title>blub?</title>
      6. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      7. <script src="test.js" type="text/javascript"></script>
      8. </head>
      9. <body>
      10. <div style="width: 100px;height: 80px; border: 1px solid red;background-color: orange; margin: 13px;" id="test">test</div>
      11. </body>
      12. </html>
      Alles anzeigen


      da wir schon wissen das wir javascript benötigen binden wir auch gleich eine
      entsprechende datei mit ein.

      für den inhalt der datei gehen wir zunächst ein wenig borgen, ich brauch was
      zuverlässiges für EventHandler (onClick ...).
      was wir suchen ist Compat.addEventHandler .. google dürfte einige beispiele
      liefern. des platzes wegen hab ichs hier etwas gekürzt.

      Quellcode

      1. function addEventHandler(element, event, handler) {
      2. var tmp, onevent;
      3. if (!element || !event )
      4. return false;
      5. if (element.addEventListener) /*DOM-konform*/
      6. element.addEventListener(event, handler, false);
      7. else {
      8. onevent = 'on'+event;
      9. if (element.attachEvent) /*IE*/
      10. element.attachEvent(onevent, handler);
      11. else { /*ältere Browser*/
      12. // eventuell schon vorhandene funktionen in die variable
      13. // tmp schieben
      14. tmp = element[onevent];
      15. if (typeof tmp == 'function') {
      16. // gibt es tatsächlich schon einen handler
      17. // für das event den neuen "anhängen"
      18. element[onevent] = function() { tmp(); handler(); };
      19. } else {
      20. // ansonsten einfach den aktuellen handler dem event
      21. // zuweisen
      22. element[onevent] = handler;
      23. }
      24. }
      25. }
      26. }
      Alles anzeigen


      dann basteln wir uns was kleines um tipparbeit zu sparen, wir sind ja
      eigentlich faul ^^

      Quellcode

      1. function $(id) {
      2. return document.getElementById(id);
      3. }


      $('test') liefert somit das element mit der id "test"

      als nächsten brauchen wir eine funktion, die den event handler an den
      "button" hängt

      Quellcode

      1. function initPage() {
      2. addEventHandler($('test'),'click',showPopup);
      3. }
      4. addEventHandler(window,'load',initPage);


      das klingt jetzt vielleicht blöd, is aber im grunde die einzig verlässliche methode.
      das event window.onLoad wird erst aufgerufen, wenn der browser den
      DOM-Baum fertig geparst hat. wir warten deshalb bis zu dem zeitpunkt,
      weil wir dann sicher sind das alle element geladen sind und wir keine
      fehlermeldung bekommen das "test" nicht vorhanden wäre.

      so jetzt nur noch die funktionen zum öffnen und schließen des popups.

      Quellcode

      1. function showPopup() {
      2. $('hideAll').style.display = 'block';
      3. $('popup').style.display = 'block';
      4. addEventHandler($('popup'),'click',closePopup);
      5. }
      6. function closePopup() {
      7. $('hideAll').style.display = 'none';
      8. $('popup').style.display = 'none';
      9. }


      wie man sieht wird hier einfach nur mit den style angaben der html objekte
      gespielt. diese elemente gibts ja aber noch nich, also müssen wir sie noch
      ins HTML einbauen.

      HTML-Quellcode

      1. <?xml version="1.0"?>
      2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      3. <html>
      4. <head>
      5. <title>blub?</title>
      6. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      7. <script src="test.js" type="text/javascript"></script>
      8. <style type="text/css">
      9. #hideAll {
      10. width: 100%;
      11. margin: 0px;
      12. padding: 0px;
      13. height: 100%;
      14. background-color: #444;
      15. opacity: 0.9;
      16. filter:alpha(opacity=90);
      17. display: none;
      18. position: absolute;
      19. top: 0px;
      20. left: 0px;
      21. overflow: hidden;
      22. }
      23. #popup {
      24. width: 60%;
      25. height: 40%;
      26. background-color: orange;
      27. display: none;
      28. position: absolute;
      29. top: 15%;
      30. left: 10%;
      31. }
      32. </style>
      33. </head>
      34. <body>
      35. <div style="width: 100px;height: 80px; border: 1px solid red;background-color: orange; margin: 13px;" id="test">test</div>
      36. <div id="hideAll">&nbsp;</div>
      37. <div id="popup">das ist das popup - klick zum schließen</div>
      38. </body>
      39. </html>
      Alles anzeigen


      was auch nicht weiter schwer ist.
      hideAll "versteckt" die ursprüngliche Seite und verhindert auch das man
      versehentlich etwas anderes als das popup anklickt.
      hideAll wird mit position: absolut und left/top. 0px in der linken oberen
      ecke des browsers ausgerichtet und mit height/width 100% über die
      gesamte seite gezogen. opacity bzw filter, für IE, macht es dann noch
      ein wenig transparent.
      das popup wird auch absolut positioniert, wo is dann reine geschmacksfrage.
      beide elemente werden erstmal mit display: none versteckt.
      die funktionen stetzen den wert dann entweder für beide auf block zum
      anzeigen oder wieder auf none zum verstecken.

      das sieht jetzt nach nem haufen aufwand wegen einem popup aus, das
      problem ist hier leider, das IE nichts von addEventListener weiß, genauso
      wenig wie ältere Browser.
      Mit inline Events wäre man zwar schneller am ziel, die sollte man aber nicht
      mehr verwenden, auch wenn sie praktisch von jedem JS fähigen browser
      verstanden werden.
      1) sie gehören nicht zum w3c standard und
      2) mischt man damit zwangsläufig code und design, was man nicht tun soll
      3) man kann nicht mehrere events an ein element hängen
      4) ein event an mehrere elemente anhängen wird schnell unschön und viel tipperei.
      so kann man alle gewünschten element in einer schleife durchlaufen und gut ^^

      viel spaß beim basteln ^^[/FONT]

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )