Lightbox 實作 純CSS JS 無 JQuery
Lightbox is like a modal dialog which usually pops up to display images. It looks fancy and more websites are now using it. Most of the tutorials on creating a Lightbox is by using jQuery. But the magic of Lightbox has nothing do with jQuery. It is the *CSS position property* that plays the key. All you need are two things:
1) a style sheet for the lightbox:
2) the lightbox:
Those are the backbone of the lightbox.
Certainly, they are of no practical use yet. A real lightbox usually appears when the reader clicks on something, e.g. a button. Secondly, it looks much better if the image in the lightbox is centered. These are not special techniques for lightbox and there are tons of solutions. Here is one example.
To open and close the lightbox:
1) Assign the lightbox an ID and hide it when loaded; Clicking on it will close itself:
2) Add a button to show the lightbox:
To center the image in the lightbox:
Centering an element horizontally is easy while doing it vertically is very tricky. Since the CSS vertical-align property works only in table cells, we use a *table* to wrap the content in the lightbox.
The style sheet for the table:
The table inside the lightbox:
Here is the whole thing of this example.
1) a style sheet for the lightbox:
.lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, .8);
}
2) the lightbox:
<div class="lightbox"> <img src="any-image-url" /> </div>
Those are the backbone of the lightbox.
Certainly, they are of no practical use yet. A real lightbox usually appears when the reader clicks on something, e.g. a button. Secondly, it looks much better if the image in the lightbox is centered. These are not special techniques for lightbox and there are tons of solutions. Here is one example.
To open and close the lightbox:
1) Assign the lightbox an ID and hide it when loaded; Clicking on it will close itself:
<div id="lightbox" class="lightbox" style="display:none"
onclick="document.getElementById('lightbox').style.display='none';">
</div>
2) Add a button to show the lightbox:
<button onclick="document.getElementById('lightbox').style.display='inline';">
Show lightbox
</button>
To center the image in the lightbox:
Centering an element horizontally is easy while doing it vertically is very tricky. Since the CSS vertical-align property works only in table cells, we use a *table* to wrap the content in the lightbox.
The style sheet for the table:
.lightbox_table {
width:100%;
height:100%;
}
.lightbox_table_cell {
vertical-align:middle;
}
The table inside the lightbox:
<table class="lightbox_table">
<tr>
<td class="lightbox_table_cell" align="center">
<div id="lightbox_content" style=
"width:300px; background-color:white; border:5px solid black;">
<img src="any-image-url" />
</div>
</td>
</tr>
</table>
Here is the whole thing of this example.
<html>
<head>
<style>
.lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0, 0, 0, .8);
}
.lightbox_table {
width:100%;
height:100%;
}
.lightbox_table_cell {
vertical-align:middle;
}
</style>
</head>
<body>
<button onclick="document.getElementById('lightbox').style.display='inline';">
Show lightbox
</button>
<!-- LIGHTBOX CODE BEGIN -->
<div id="lightbox" class="lightbox" style="display:none"
onclick="document.getElementById('lightbox').style.display='none';">
<table class="lightbox_table">
<tr>
<td class="lightbox_table_cell" align="center">
<div id="lightbox_content" style=
"width:300px; background-color:white; border:5px solid black;">
<p>Click anywhere to close the lightbox.</p>
<p>Use Javascript to insert anything here.</p>
</div>
</td>
</tr>
</table>
</div>
<!-- LIGHTBOX CODE END -->
</body>
</html>
