javascript 如何向 jquery Lightbox 添加关闭按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16627507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a close button to jquery Lightbox?
提问by Gelu
I recently made a Lightbox and I want to add a close button to it. Here is what I have:
我最近做了一个灯箱，我想给它添加一个关闭按钮。这是我所拥有的：
<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>
How can I add a close button to the top corner of the popup window?
如何在弹出窗口的顶角添加关闭按钮？
采纳答案by rails_id
Add class closeon <a>tag and put into <div>tag, content too.
close在<a>标签上添加类并放入<div>标签，内容也。
<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>
On class .white_contentremove overflow: auto;
在课堂上.white_content删除overflow: auto;
I have made it, you can see on jsfiddle, edit jsfiddle
我已经成功了，你可以在jsfiddle上看到，编辑 jsfiddle
回答by Eric Leschinski
How to add a close button to jquery lightbox:
如何向 jquery 灯箱添加关闭按钮：
Live example, put this in a file named test.html:
实时示例，将其放在名为 的文件中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>
In the same directory as test.html you need to include the files jquery-1.10.2.min.jsand jquery.lightbox_me.jswhich can be found here:
在同一目录中的test.html，你需要包括的文件jquery-1.10.2.min.js，并jquery.lightbox_me.js可以在这里找到：
http://buckwilson.me/lightboxme/
http://buckwilson.me/lightboxme/
Screenshot of what happens when you click the link.
单击链接时发生的情况的屏幕截图。
When you click the close button in the popup the popup closes. You could hook that close event onto anything.
当您单击弹出窗口中的关闭按钮时，弹出窗口将关闭。您可以将关闭事件挂接到任何东西上。
