Javascript box

Hi,
ik heb nu dit: http://bleazer.nl/js.html
Maar ik wil dat als ik de button aanklik dat ik met een effect een box in me scherm krijg, waar text in staat.
En ik wil graag meerdere buttons, want bij deze loop ik vast; voor 3 buttons heb ik maar 1 text.

Zou dat kunnen? Alvast bedankt! Een kleine beloning aanwezig

zo?

<button a href=

    "javascript:void(0)" onclick = "document.getElementById(andere).style.display=block;document.getElementById(fade).style.display=block"

     style="background: url(bgbutton.png); border-radius: 5px; height: 43px; width: 250px; border-color: #7DB6DB; color: #454545; font-size: 18px;  "> 

     <style= float: left;><img src="vcard.png"></style>&nbsp;&nbsp;&nbsp;Bleazer video</button></p>

        

        <div id="andere" class="white_content">test <a href = "javascript:void(0)" onclick = "document.getElementById(light).style.display=none;document.getElementById(fade).style.display=none">Close</a></div>

        <div id="fade" class="black_overlay"></div>

Nope werkt niet

zo werkt hij

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
    <head>
        <title>LIGHTBOX EXAMPLE</title>
        <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid grey;
            -moz-border-radius: 15px;
            border-radius: 15px;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>
    </head>
    <body>
        <p>
    <button a href="javascript:void(0)" onclick = "document.getElementById(light).style.display=block;document.getElementById(fade).style.display=block"

     style="background: url(bgbutton.png); border-radius: 5px; height: 43px; width: 250px; border-color: #7DB6DB; color: #454545; font-size: 18px;  "> 

     <style= float: left;></style>Bleazer video</button></p>

        

        <div id="light" class="white_content">test22<a href = "javascript:void(0)" onclick = "document.getElementById(light).style.display=none;document.getElementById(fade).style.display=none">Close</a></div>

        <div id="fade" class="black_overlay"></div>

    </body>

</html>
   <button a href= "javascript:void(0)" onclick = "document.getElementById(andere).style.display=block;document.getElementById(fade).style.display=block"
     style="background: url(bgbutton.png); border-radius: 5px; height: 43px; width: 250px; border-color: #7DB6DB; color: #454545; font-size: 18px;"> 
<style= float: left;></style>Bleazer video</button></p>
<div id="andere" class="white_content">test <a href = "javascript:void(0)" onclick = "document.getElementById(andere).style.display=none;document.getElementById(fade).style.display=none">Close</a></div>
        <div id="andere" class="black_overlay"></div>

wat heb ik gedaan jou id heet fade ik heb een andere gemaakt die andere heet
dan open je een andere box

Je kan een functie maken:

ONCLICK:

lightbox_open( - Tekst hier met enters enzo -);

SCRIPT DING:

function lightbox_open(txt){
    document.getElementById(light).innerHTML = txt;
    document.getElementById(light).style.display = block;
    document.getElementById(fade).style.display = block;
}

function lightbox_close(){
    document.getElementById(light).style.display = none;
    document.getElementById(fade).style.display = none;
}

Snap je?
E: Updated & fixed

Nee Maar die van Smiegles werkte ook Toch bedankt ;p

Waarom die van mij niet?
Das veel makkelijker
Ik zie dat er een paar fouten inzitten efe snel gefixed

Lijkt me idd ook korter, maar hoe zet je dat erin?

De onclick bij de buttons vervangen met die van mij

Het 2de script tussen:

zetten

Sluit link moet je:
onclick="lightbox_close();"

En hoe kan ik dan me tekst plaatsen?

onclick="lightbox_open(Hier de tekst met <br /> enzo!);"

Woow, bedankt!

Graag gedaan
Veel succes met de site

Bedankt!