文本单击时的 HTML/CSS 弹出 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19064987/
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
HTML / CSS Popup div on text click
提问by coder
I want to make popup div instead of popup window for my 'About' picture/page with current button like in this example:
我想使用当前按钮为我的“关于”图片/页面制作弹出式 div 而不是弹出式窗口，如下例所示：
回答by coder
DEMO
演示
In the content area you can provide whatever you want to display in it.
在内容区域中，您可以提供想要在其中显示的任何内容。
.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>回答by Yair Nevet
You can simply use jQuery UI Dialog
您可以简单地使用jQuery UI 对话框
Example:
例子：
$(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>回答by Laurent BILLON
For the sake of completeness, what you are trying to create is a "modal window".
为了完整起见，您尝试创建的是“模态窗口”。
Numerous JS solutions allow you to create them with ease, take the time to find the one which best suits your needs.
许多 JS 解决方案可让您轻松创建它们，花时间找到最适合您需求的解决方案。
I have used Tinybox 2 for small projects : http://sandbox.scriptiny.com/tinybox2/
我已经将 Tinybox 2 用于小型项目：http://sandbox.scriptiny.com/tinybox2/
