45

我想使用当前按钮为我的“关于”图片/页面制作弹出 div 而不是弹出窗口，如下例所示： 我的天啊！ 乌班图！ Facebook喜欢弹出

4

3 回答 3

138

演示

在内容区域中，您可以提供您想要在其中显示的任何内容。

.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>

于 2013-09-28T08:35:36.573 回答
15

您可以简单地使用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>

于 2013-09-28T08:34:41.583 回答
8

为了完整起见，您要创建的是“模态窗口”。

许多 JS 解决方案让您可以轻松创建它们，花时间找到最适合您需求的解决方案。

我在小型项目中使用过 Tinybox 2：http: //sandbox.scriptiny.com/tinybox2/

于 2013-09-28T08:39:29.787 回答