Anzeige

popup mit javascript

popup mit javascript | PSD-Tutorials.de

Erstellt von MiezeKathi, 30.05.2012.

  1. MiezeKathi

    MiezeKathi Noch nicht viel geschrieben

    Dabei seit:
    26.01.2007
    Beiträge:
    31
    popup mit javascript
    hallo!

    ich bin neuling in javascript und muss für ein projekt ein popup erstellen.
    es soll ein bild in einem neuen browserfenster geöffnet werden wenn man meine site betritt. soweit hab ich das schon hinbekommen nur leider öffnet sich das bild in einem neuen tab und nicht direkt in der index-seite. wie ist das möglich? kann mir da jemand weiterhelfen?
    das popup sollte 500 x 183 px groß sein.


    ....
    <script type="text/javascript">
    function PopupFenster() {
    window.open('popup.jpg');
    }
    </script>
    </head>


    <body onload="PopupFenster()">

    <div id="popup" style="display:none" width="500px" height="183px">
    </div>
    ...


    vielen Dank!
     
    #1      
  2. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    popup mit javascript
    AW: popup mit javascript

    So weit ich weiß wird das Verhalten vom Browser bzw. den Browsereinstellungen gesteuert. Die window.open()-Methode ist daher nicht mehr das Mittel der Wahl für diesen Anwendungsfall.

    Was du suchst ist ein (modales) Dialogfenster und dafür gibt es z.B. in jQuery sehr viele PlugIns. Falls du es ohne Framework machen willst, musst du dich wohl mit der window.open()-Variante im neuen Tab zufrieden geben.


    Duddle
     
    #2      
  3. Digicam

    Digicam weitestgehend nur noch lesend

    Dabei seit:
    27.08.2006
    Beiträge:
    3.295
    Geschlecht:
    männlich
    Ort:
    D-68723
    Software:
    Adobe CS 6
    Kameratyp:
    Fuji X-T10
    popup mit javascript
    AW: popup mit javascript

    Dass das Bild in einem neuen Tab geöffnet wird, hat Duddle richtig erkannt, liegt an den Browsereinstellungen.

    Aber was anderes:

    Was nun? Ein neues Fenster (oder neuer Tab, je nach Browsereinstellung) oder auf der Index-Seite? Deine Ausführungen widersprechen sich.
     
    #3      
  4. mindraper

    mindraper me[code].Java(Script)

    Dabei seit:
    12.08.2007
    Beiträge:
    213
    Geschlecht:
    männlich
    Ort:
    Zuhause
    Software:
    Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil
    popup mit javascript
    AW: popup mit javascript

    hi.

    window.open() ist wohl nicht ganz die richtige methode, die du haben willst. aus deinem codeschnipsel entnehme ich, dass du gerne das div-tag mit der id "popup" einblenden würdest, sobald die seite geladen ist? dafür braucht es mitnichten jquery, allerdings kannst du mit eben diesem z. b. das popup weich einblenden, von links/rechts/oben/unten "einfahren", etc. lassen.

    für die weniger "spektakuläre", aber framework-freie variante müsstest du deine PopupFenster()-function modifizieren:

    JAVASCRIPT
    PHP:
    1.  
    2. // functions klein schreiben, sofern keine constructor-functions
    3. function initPopup () {
    4.     // das popup-element holen
    5.     var node = document.getElementById('popup');
    6.  
    7.     // testen ob das element gerade "sichtbar" ist
    8.     if (node.style.display === 'block') {
    9.         // sofern sichtbar, unsichtbar machen
    10.         node.style.display = 'none';
    11.     } else {
    12.         // ansonsten sichtbar machen
    13.         node.style.display = 'block';
    14.     }
    15. };
    16.  
    zunächst mal habe ich hier die function ein wenig umbenannt, das ist einerseits geschmackssache, andererseits hat es etwas damit zu tun, dass sich bei javascript-codern (und bei eigentlich allen anderen auch) die konvention durchgesetzt hat, nur eine ganz bestimmte sorte von functions mit einen großbuchstaben beginnen zu lassen: solche, die ein object erzeugen und/oder zurückgeben.

    danach sucht die function via document.getElementById() nach einen knoten im DOM (hier: HTML-baum) mit der id 'popup' und speichert diesen in der variable node.

    in der if-else abfrage wird dann geprüft, ob der css-wert von display bei dem knoten 'block' ist (das element also sichtbar ist). sofern ja, wird dieser wert auf 'none' gesetzt, was dein element unsichtbar macht. anderenfalls auf 'block'.

    un ferddisch is die laube. :)

    hoffe das hilft
     
    #4      
  5. Tr3icio

    Tr3icio Nicht mehr ganz neu hier

    Dabei seit:
    03.04.2011
    Beiträge:
    53
    Geschlecht:
    männlich
    Ort:
    Hude
    Software:
    Jetbrains PhpStorm
    popup mit javascript
    AW: popup mit javascript

    window.open() mit 2. Parameter für Fensternamen (irgendeinen außer die reservierten) + 3. Paramater für Höhe udn Breite und es funktioniert in allen bekannten Browsern (IE, Firefox, Opera, Safari, Chrome) auch wenn Popups blockiert werden
     
    #5      
Seobility SEO Tool
x
×
×