HTML / CSSpopupdiv文本点击
我想使popup的div而不是popup窗口为我的“关于”图片/页面与当前button，如在这个例子中： 
DEMO
在内容区域中，您可以提供任何您想要显示的内容。
.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 { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index: 1002; overflow: auto; } <html> <head> <title>LIGHTBOX EXAMPLE</title> </head> <body> <p>This is the main content. To display a lightbox click <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">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a> </div> <div id="fade" class="black_overlay"></div> </body> </html>
你可以简单地使用jQuery UI对话框
例：
$(function() { $("#dialog").dialog(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Dialog - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> </head> <body> <div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> </body> </html>
为了完整性，你试图创build的是一个“模态窗口”。
许多JS解决scheme可以让您轻松创build它们，花时间find最适合您的需求的解决scheme。
我已经使用Tinybox 2进行小型项目： http ://sandbox.scriptiny.com/tinybox2/
