单击文本的HTML/CSS Popup div

Question

单击文本的HTML/CSS Popup div

我想使用当前按钮为我的"关于"图片/页面创建弹出窗口而不是弹出窗口,如下例所示: 我的天啊! Ubuntu的! Facebook喜欢popup

Answer 1

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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

伟大的代码,但两个位置应该是"固定的".如果用户在滚动后单击链接,则叠加和模态窗口将转到页面顶部. (10认同)
对于任何感兴趣的人,如果您希望叠加层"展开过去"视口(即接管整个页面)将位置设置为固定.这将使整个页面看起来好像有叠加层. (3认同)

Answer 2

Yai*_*vet 15

您只需使用jQuery UI Dialog即可

例:

$(function() {
  $("#dialog").dialog();
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

小智 8

为了完整起见,您要创建的是"模态窗口".

许多JS解决方案允许您轻松创建它们,花时间找到最适合您需求的解决方案.

我已将Tinybox 2用于小型项目:http://sandbox.scriptiny.com/tinybox2/

归档时间：	11 年，11 月前
查看次数：	348672 次
最近记录：	8 年，11 月前