popup mit javascript

MiezeKathi · 30.05.2012

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!

Duddle · 30.05.2012

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 . Falls du es ohne Framework machen willst, musst du dich wohl mit der window.open()-Variante im neuen Tab zufrieden geben.

Duddle

Digicam · 30.05.2012

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:

MiezeKathi schrieb:
es soll ein bild in einem neuen browserfenster geöffnet werden wenn man meine site betritt. [...] nur leider öffnet sich das bild in einem neuen tab und nicht direkt in der index-seite.

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

mindraper · 30.05.2012

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:

// functions klein schreiben, sofern keine constructor-functions
function initPopup () {
    // das popup-element holen
    var node = document.getElementById('popup');

    // testen ob das element gerade "sichtbar" ist
    if (node.style.display === 'block') {
        // sofern sichtbar, unsichtbar machen
        node.style.display = 'none';
    } else {
        // ansonsten sichtbar machen
        node.style.display = 'block';
    }
};

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

Tr3icio · 31.05.2012

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