Comment ajouter un bouton de fermeture à jquery Lightbox?

J'ai récemment fait un Lightbox et je veux ajouter un bouton de fermeture à elle. Voici ce que j'ai:

    <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 {
width:600px;
height:560px;
padding: 16px;
top: 5%;
left: 25%;
position: absolute;
display: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border:2px solid #FFFFFF;
background-color:#FFFFFF;
-webkit-box-shadow: #C9C9C9 8px 8px 8px;
-moz-box-shadow: #C9C9C9 8px 8px 8px;
box-shadow: #C9C9C9 8px 8px 8px;
z-index:1002;
overflow: auto;
</style>
</head>
<body>
<p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here.................................................................................................</a></p>
<div id="light" class="white_content"><center><img src="http://theamazingmonth.pusku.com/files/Help.png">
<br>
<!--- Text for Help.</--->
<p align="left">
<div class="tilt pic">
<img src="http://theamazingmonth.pusku.com/clues/Envelope.png" height="114" width="193" alt="">
</div>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">x</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

Comment puis-je ajouter un bouton de fermeture dans le coin supérieur de la fenêtre pop-up?

InformationsquelleAutor Gelu | 2013-05-18

Ajouter une classe close sur <a> balise et de mettre en <div> étiquette, le contenu aussi.

<div id="light" class="white_content">
<div class="white-header>"
<a class="close" href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">x</a>
</div>
<div class="white-body">
content here
</div>
</div>

De la classe .white_content supprimer overflow: auto;

Je l'ai fait, vous pouvez le voir sur jsfiddle , edit jsfiddle

InformationsquelleAutor rails_id

Comment ajouter un bouton de fermeture à jquery lightbox:

Live exemple, mettez-le dans un fichier nommé test.html:

<html>
<head>        
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.lightbox_me.js"></script>
</head>
<body>
<style>
#my_lightbox{
display: none;
width: 500px;
height: 170px;
text-align: center;
border: 1px solid blue;
vertical-align: middle;
background: #eef2f7;
-webkit-border-radius: 15px;
padding: 14px 22px;
-moz-border-radius: 6px;
margin: 0;
text-decoration: none;
list-style: none;
outline: none;
color: #536376;
}
</style>
<script>
var dispatchpopup = function(){  
$('#my_lightbox').lightbox_me({
centered: true,
onLoad: function() {
$('#my_lightbox_text').html("Stuff");
}
});
}
</script>
<a href="#" onClick="dispatchpopup();">Clicky</a>
<div id="my_lightbox">
<div id="my_lightbox_text"></div>
<button id="penguin" onClick="$('#my_lightbox').trigger('close');">CloseME</button>
</div>
</body>
</html>