我是网络开发的新手。
我需要一个示例代码，通过关闭按钮在页面加载时在灯箱中显示可点击的图像。此外，如果有办法，我需要它只在桌面浏览器上显示（避免任何移动设备），并且每个用户IP每天显示5次。
有人可以帮忙吗？
感谢。
答案 0 :(得分：0)
灯箱只是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次，您可以使用localstorage。以下是一些资源：
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/
答案 1 :(得分：0)
一起作为一个文件。
<!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>