文本单击上的 HTML / CSS 弹出 div [关闭]答案

【问题标题】：HTML / CSS Popup div on text click [closed]文本单击上的 HTML / CSS 弹出 div [关闭]
【发布时间】：2013-10-04 14:10:42
【问题描述】：

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

【问题讨论】：

询问代码的问题应显示对问题的最低理解。这意味着您必须在您的问题中包含尝试过的解决方案、它们为什么不起作用以及预期结果。
你可以使用：Reveal jQuery Modals：zurb.com/playground/reveal-modal-plugin
我一直在寻找解决这个问题的方法，但找不到它的教程。感谢您提出这个问题:)

标签： css html popup

【解决方案1】：

演示

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

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

【讨论】：

很棒的代码，但两个位置都应该是fixed。如果用户在滚动后单击链接，则覆盖和模式窗口将转到页面顶部。
对于任何感兴趣的人，如果您希望叠加层“扩大”视口（即接管整个页面），请将位置设置为固定。这将使它看起来好像整个页面都有覆盖。

【解决方案2】：

您可以简单地使用jQuery UI Dialog

例子：

$(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>

【讨论】：

这个问题要求的是 CSS，而不是 Javascript。 CSS 不太可能在浏览器中被禁用。

【解决方案3】：

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

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

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

【讨论】：

提问者询问页面内的 HTML 弹出窗口，而不是“模态窗口”。
我不会推荐 TinyBox。它没有记录，源代码被混淆了。你会一直有麻烦的。