Il est tout à fait possible de créer un effet lightBox en utilisant uniquement CSS et la pseudo-classe :target, sans passer par une utilisation importante de javascript et de JQuery.

La pseudo-classe :target

L'exemple qui suit va permettre de comprendre l'utilisation de cette pseudo-classe.
Définissons une ancre "winpopup" avec une couleur de fond rouge.
Lorsque cette ancre sera ciblée elle prendra la couleur de fond bleue.

Code CSS:

#winpopup       { width:100px; height:50px; background-color:red; }
#winpopup:target{ background-color:blue; }

Pour cela nous utilisons 2 liens, le premier des liens pointe vers cette ancre alors que le second lien pointe vers le premier.

Code html:

<div id="nowhere">
        <div id="winpopup"></div>
        <p>
            <a href="#winpopup">Changer la couleur de la boîte</a><br />
            <a href="#noWhere">Rétablir la couleur</a>
        </p>
</div>

Création de la fenêtre modale

En utilisant la pseudo-classe :target pour interagir au clic sur un lien avec un autre élément, nous allons pouvoir utiliser cette technique pour créer une fenêtre modale.
En premier il faut afficher le masque opaque puis d'y ajouter le message à afficher.

Création d'un masque

Le masque opaque ne doit être affiché que lorsque nous cliquons sur le lien souhaité. Il sera donc invisible par défaut.
De plus, il faut empêcher toute interaction avec le reste de la page, et il faut donc qu'il couvre totalement celle-ci.
La meilleure solution pour cela est de lui donner un display:none; et une position:fixed. Il ne reste plus ensuite qu'à définir ses dimensions, sa couleur de fond, son opacité et si besoin son z-index.

Code CSS:

#overlay{
    display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: black;
    opacity: 0.5;
    z-index: 1000;
}
#overlay:target{
    display: block;
}
#overlay a{
    font-weight: bold;
    padding: 10px 25px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50px;
}

Code html:

<div id="overlay"><a href="#noWhere">Supprimer le masque</a></div>
<p><a href="#overlay">Afficher le masque</a></p>

tester le résultat:

Problème d'opacité

Mais nous sommes confronté à un problème d'opacité. Le message à afficher de la fenêtre modale devra être à l'intérieur du balisage du masque, et dans ce cas l'opacité d'un élément est transmise à tous ses enfants. Ce qui fait que le message sera lui aussi opaque!
Si l'opacité est transmise aux balises enfants, nous allons donc la gérer au niveau de la couleur de fond en utilisant le mode rgba.
Le mode rgba est une façon de définir une couleur apparue avec CSS 3. Elle reprend ce qui existait avec rgb (red, green, blue) en ajoutant un paramètre alpha correspondant à la transparence.

#overlay{
    display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
#overlay:target{
    display: block;
}
#overlay a{
    font-weight: bold;
    padding: 10px 25px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50px;
}

tester le résultat:

La fenêtre popup définitive

Il est plus agréable d'utiliser un bouton pour fermer la fenêtre.
Nous allons utiliser l'image:

Et nous allons définir l'aspect de la fenêtre modale et de son bouton pour fermer.

#overlay{
    display: none;
    position: fixed;
    top:0; right:0; bottom:0; left:0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
#overlay:target{
    display: block;
}
.popup_block{
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    position: relative;
    margin: 10% auto;
    width: 40%;
    box-shadow: 0px 0px 20px #000;
    border-radius: 10px;
}
img.btn_close {
    float: right;
    margin: -55px -55px 0 0;
}