9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)
  • Q:
    Bijdrager
    kimkellyoosten
    9 oktober 2008 om 09:58

    Div als popup bij openen website

    Goedemorgen,

    Ik wil graag bij het openen van mijn website een pop-up laten zien, waarin ik doorlink naar de meest belangrijke onderdelen van mijn website. Nu wil ik een pop-up die niet wordt geblokkeerd door de browser, dus ben ik gaan zoeken op o.a. Google, en kom nu dus op een div als pop-up als oplossing. Alleen hoe pak ik dit verder aan? Heeft iemand een voorbeeld script (html en css) van een pop-up in een div die automatisch verschijnt bij het openen van de site?

    Bij voorbaat dank! KKO

    Geblokkeerd
    Anoniem
    9 oktober 2008 om 10:07

    Mag ik bij voorbaat zeggen dat een hoop mensen bij het “ruiken” van popups de website
    vaak al zo snel mogelijk wegklikken? Het meest “gebruiksvriendelijk” is nog een pop-in.
    Een beetje zoals Lightbox bijvoorbeeld: http://www.huddletogether.com/projects/lightbox/
    Dan geef je de gebruiker geen irritante pop-up, maar een mooi vormgegeven pop-in die
    mensen vaak veel minder “in de weg” vinden zitten. (was dat een zin?)

    Misschien een idee?:)

    Bijdrager
    kimkellyoosten
    9 oktober 2008 om 10:49

    Dat snap ik, ik ben het ook volkomen met je eens, maar dit is iets wat ik moet uitvoeren voor een klant…

    Maar mensen moeten dus gelijk de pop-up voor hun neus krijgen, en niet zoals met een lightbox eerst ergens op moeten klikken… Of is dit met een lightbox ook mogelijk?

    Geblokkeerd
    Anoniem
    9 oktober 2008 om 11:31

    Lightbox (en soortgenoten) zijn puur pop-ins, dus in hetzelfde venster als waar je
    de website zelf bezoekt.

    Pop-ups kun je volgens mij het beste met JavaScript doen:
    Vroeger deed je het zo:
    [code:1:5c83bf3f69]<a href="#" title="#" target="_blank"></a>[/code:1:5c83bf3f69]

    Maar volgens mij werkt ’t het beste als je het nu zo doet (i.v.m. validatie)
    [code:1:5c83bf3f69]<a href="#" title="#" onclick="target=’newwindow’"></a>[/code:1:5c83bf3f69]

    Als ik ’t fout heb wordt ik graag verbeterd:)

    Bijdrager
    kimkellyoosten
    9 oktober 2008 om 14:10

    Maar opent die dan automatisch bij het openen van de website? Of moet je om die lightbox te zien eerst ergens op klikken?

    Geblokkeerd
    Anoniem
    9 oktober 2008 om 14:24

    Lightbox kun je echt vergeten. Da’s iets heel anders dan wat jij wilt namelijk:)
    Als jij een nieuw venster wilt wat zich automatisch opent dan zul je dat met JavaScript
    moeten doen voor zover ik weet:)

    Lightbox is namelijk een JavaScript (of beter: een AJAX-script) waarmee je vensters in vensters
    kunt openen. Voor een nieuw venster heb je een gewone pop-up-optie nodig, maar in jouw
    geval nog een speciale omdat het automatisch moet gebeuren toch?

    Hoe zoiets automatisch kan weet ik niet… daar heb je een webguru nodig, en dat ben ik niet:)

    Bijdrager
    Jesse
    9 oktober 2008 om 16:02

    Lightbox variaties:

    http://webdeveloper.econsultant.com/css-lightbox-variations/

    Als ik het me goed herinner zit er één tussen die aan je eisen voldoet. Een lelijke pop-up is ook niet alles.

    Bijdrager
    Almerrrrr
    10 oktober 2008 om 10:03

    Anders zou je ook nog zoiets kunnen doen floating window

    Kijk maar eens bij de demo’s

    Bijdrager
    kaydie
    10 oktober 2008 om 11:27

    of quick & dirty… :wink:

    [code:1:6746f54609]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <title>popup</title>

    <style type="text/css" media="screen">

    body { color: #000; background:silver; margin: 0; }
    p{ margin:0; padding:0; font-size:35em; text-align:center; }

    #popup {
    position:absolute;
    top:50%;left:50%;
    width:320px;height:240px;
    margin: -120px 0 0 -160px;
    background:white;
    border:1px solid black;
    display:none;
    }

    </style>

    <script type="text/javascript">
    window.onload = function(){
    document.getElementById(’popup’).style.display=’block’;
    }
    </script>

    <p>BG</p>

    <div id="popup">Popup <a href="#" onclick="document.getElementById(’popup’).style.display=’none’">close</a></div>
    [/code:1:6746f54609]

9 berichten aan het bekijken - 1 tot 9 (van in totaal 9)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.