我是网络开发的新手。
我需要一个示例代码，在页面加载时通过关闭按钮在灯箱中显示可点击的图像。另外，如果有办法，我需要它仅在桌面浏览器上显示（避免使用任何移动设备），并且每个用户 IP 每天显示 5 次。
有人可以帮忙吗？
谢谢。
【问题讨论】：
标签： javascript jquery lightbox
所有在一起，作为一个文件。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
div{position:relative;box-sizing:border-box;}
#overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:black;opacity:0.7;z-index:1;}
#lb{position:fixed;top:30px;left:20%;width:300px;height:300px;z-index:2;}
#lb_hdr{height:30px;width:100%;overflow:hidden;background:#333;color:white;}
#lb_hdr_title{float:left;height:100%;width:90%;padding:5px;}
#lb_hdr_close{float:left;height:100%;width:10%;}
.lb_close{padding:5px;background:dodgerblue;color:white;text-align:center;cursor:pointer;}
#lb_body{height:250px;width:100%;}
#lb_body_top{height:200px;width:100%;}
#lb_body_bot{height:50px;width:100%;background:white;}
#lb_bot_btn{position:absolute;right:20px;height:50px;width:80px;}
button{width:100%;height:30px;background:dodgerblue;color:white;}
</style>
<script>
$(function(){
$('.lb_close').click(function(){
$('#overlay, #lb').fadeOut();
});
$('#lb_body_top img').click(function(){
alert('You clicked the picture');
});
});//END document.ready
</script>
</head>
<body>
<div id="overlay"></div>
<div id="lb">
<div id="lb_hdr">
<div id="lb_hdr_title">Here is the title</div>
<div id="lb_hdr_close"><div class="lb_close">X</div></div>
</div><!-- #lb_hdr -->
<div id="lb_body">
<div id="lb_body_top">
<img src="http://placeimg.com/300/200/animals">
</div><!-- _lb_body_top -->
<div id="lb_body_bot">
<div id="lb_bot_btn">
<button class="lb_close">Close</button>
</div><!-- #lb_bot_btn -->
</div><!-- #lb_body_bot -->
</div><!-- #lb_body -->
</div><!-- #lb -->
<div id="wrap">
Three Thousand Year Old Wisdom Literature<br><br>
1 Happy is the man with a level-headed son; sad the mother of a rebel.
2 Ill-gotten gain brings no lasting happiness; right living does.
4 Lazy men are soon poor; hard workers get rich.
5 A wise youth makes hay while the sun shines, but what a shame to see a lad who sleeps away his hour of opportunity.
6 The good man is covered with blessings from head to foot, but an evil man inwardly curses his luck.
7 We all have happy memories of good men gone to their reward, but the names of wicked men stink after them.
8 The wise man is glad to be instructed, but a self-sufficient fool falls flat on his face.
9 A good man has firm footing, but a crook will slip and fall.
11 There is living truth in what a good man says, but the mouth of the evil man is filled with curses.
12 Hatred stirs old quarrels, but love overlooks insults.
13 Men with common sense are admired as counselors; those without it are beaten as servants.
14 A wise man holds his tongue. Only a fool blurts out everything he knows; that only leads to sorrow and trouble.
15 The rich man’s wealth is his only strength. The poor man’s poverty is his only curse.
17 Anyone willing to be corrected is on the pathway to life. Anyone refusing has lost his chance.
18 To hide hatred is to be a liar; to slander is to be a fool.
19 Don’t talk so much. You keep putting your foot in your mouth. Be sensible and turn off the flow!
20 When a good man speaks, he is worth listening to, but the words of fools are a dime a dozen.
21 A godly man gives good advice, but a rebel is destroyed by lack of common sense.
23 A fool’s fun is being bad; a wise man’s fun is being wise!
24 The wicked man’s fears will all come true and so will the good man’s hopes.
25 Disaster strikes like a cyclone and the wicked are whirled away. But the good man has a strong anchor.
26 A lazy fellow is a pain to his employers—like smoke in their eyes or vinegar that sets the teeth on edge.
</div><!-- #wrap -->
</body>
</html>
【讨论】：
灯箱只是 DIV 结构，是框内的框（div 内的 div），最外层的 div 有 css position:fixed;z-index:2;
注意事项：（a）位置也可以是absolute，但是灯箱会随着页面滚动，（b）灯箱的z-index应该高于z-index应该在灯箱下方的任何其他元素。
与页面上的任何其他 HTML 元素一样，灯箱 div 结构将可见，除非明确设为不可见（例如，使用 display:none; 或 jQuery hide() 或 fadeOut() 等） - 所以灯箱将可见默认，然后您可以使用 javascript/jQuery 在按钮单击时将其隐藏：
$('.lb_close').click(function(){
$('#overlay, #lb').fadeOut();
});
$('#lb_body_top img').click(function(){
alert('You clicked the picture');
});div{position:relative;box-sizing:border-box;}
#overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:black;opacity:0.7;z-index:1;}
#lb{position:fixed;top:30px;left:20%;width:300px;height:300px;z-index:2;}
#lb_hdr{height:30px;width:100%;overflow:hidden;background:#333;color:white;}
#lb_hdr_title{float:left;height:100%;width:90%;padding:5px;}
#lb_hdr_close{float:left;height:100%;width:10%;}
.lb_close{padding:5px;background:dodgerblue;color:white;text-align:center;cursor:pointer;}
#lb_body{height:250px;width:100%;}
#lb_body_top{height:200px;width:100%;}
#lb_body_bot{height:50px;width:100%;background:white;}
#lb_bot_btn{position:absolute;right:20px;height:50px;width:80px;}
button{width:100%;height:30px;background:dodgerblue;color:white;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="overlay"></div>
<div id="lb">
<div id="lb_hdr">
<div id="lb_hdr_title">Here is the title</div>
<div id="lb_hdr_close"><div class="lb_close">X</div></div>
</div><!-- #lb_hdr -->
<div id="lb_body">
<div id="lb_body_top">
<img src="http://placeimg.com/300/200/animals">
</div><!-- _lb_body_top -->
<div id="lb_body_bot">
<div id="lb_bot_btn">
<button class="lb_close">Close</button>
</div><!-- #lb_bot_btn -->
</div><!-- #lb_body_bot -->
</div><!-- #lb_body -->
</div><!-- #lb -->
<div id="wrap">
Three Thousand Year Old Wisdom Literature<br><br>
1 Happy is the man with a level-headed son; sad the mother of a rebel.
2 Ill-gotten gain brings no lasting happiness; right living does.
4 Lazy men are soon poor; hard workers get rich.
5 A wise youth makes hay while the sun shines, but what a shame to see a lad who sleeps away his hour of opportunity.
6 The good man is covered with blessings from head to foot, but an evil man inwardly curses his luck.
7 We all have happy memories of good men gone to their reward, but the names of wicked men stink after them.
8 The wise man is glad to be instructed, but a self-sufficient fool falls flat on his face.
9 A good man has firm footing, but a crook will slip and fall.
11 There is living truth in what a good man says, but the mouth of the evil man is filled with curses.
12 Hatred stirs old quarrels, but love overlooks insults.
13 Men with common sense are admired as counselors; those without it are beaten as servants.
14 A wise man holds his tongue. Only a fool blurts out everything he knows; that only leads to sorrow and trouble.
15 The rich man’s wealth is his only strength. The poor man’s poverty is his only curse.
17 Anyone willing to be corrected is on the pathway to life. Anyone refusing has lost his chance.
18 To hide hatred is to be a liar; to slander is to be a fool.
19 Don’t talk so much. You keep putting your foot in your mouth. Be sensible and turn off the flow!
20 When a good man speaks, he is worth listening to, but the words of fools are a dime a dozen.
21 A godly man gives good advice, but a rebel is destroyed by lack of common sense.
23 A fool’s fun is being bad; a wise man’s fun is being wise!
24 The wicked man’s fears will all come true and so will the good man’s hopes.
25 Disaster strikes like a cyclone and the wicked are whirled away. But the good man has a strong anchor.
26 A lazy fellow is a pain to his employers—like smoke in their eyes or vinegar that sets the teeth on edge.
</div><!-- #wrap -->如果你只想为灯箱使用插件，我建议使用 jQueryUI 及其dialog() 方法：
if else if statement on mousedown event
https://jqueryui.com/dialog/#modal-confirmation
以下是检测浏览器是否为移动设备的解决方案：
https://stackoverflow.com/a/11381730/1447509
要将灯箱显示限制为每天 5 次，您可以使用本地存储。以下是一些资源：
https://www.smashingmagazine.com/2010/10/local-storage-and-how-to-use-it/
http://www.webdesignerdepot.com/2013/04/how-to-use-local-storage-for-javascript/
【讨论】：