So fügen Sie eine Schaltfläche "schließen" jquery Lightbox?
Vor kurzem habe ich eine Lightbox und ich möchte hinzufügen, die Schaltfläche "schließen". Hier ist, was ich habe:
<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>
Wie kann ich eine Schaltfläche zum schließen hinzufügen auf der oberen Ecke des popup-Fenster?
InformationsquelleAutor Gelu | 2013-05-18
Du musst angemeldet sein, um einen Kommentar abzugeben.
Klasse hinzufügen
close
auf<a>
tag und in<div>
tag, Inhalt auch.Klasse
.white_content
entfernenoverflow: auto;
Habe ich es gemacht, können Sie sehen,jsfiddle , edit jsfiddle
InformationsquelleAutor rails_id
, Wie eine Schaltfläche zum schließen hinzufügen von jquery lightbox:
Live-Beispiel, setzen Sie diese in eine Datei namens
test.html
:Im gleichen Verzeichnis wie test.html Sie müssen die Dateien
jquery-1.10.2.min.js
undjquery.lightbox_me.js
können hier gefunden werden:http://jquery.com/download/
http://buckwilson.me/lightboxme/
Screenshot von dem, was passiert, wenn Sie auf den link klicken.
Wenn Sie auf die Schaltfläche "schließen" in dem popup das popup wird geschlossen. Sie konnte hook, close-Ereignis auf irgendetwas.
InformationsquelleAutor Eric Leschinski