web-dev-qa-db-ja.com

テキストクリック時のHTML / CSSポップアップdiv

この例のように、現在のボタンを持つ「About」画像/ページのポップアップウィンドウの代わりにポップアップdivを作成します。 OMG! Ubuntu! Facebook like popup

csshtmlpopup
45
user2104319

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

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>
15
Yair Nevet

完全を期すために、作成しようとしているのは「モーダルウィンドウ」です。

多数のJSソリューションを使用すると、簡単に作成でき、時間をかけてニーズに最適なものを見つけることができます。

私は小さなプロジェクトにTinybox 2を使用しました： http://sandbox.scriptiny.com/tinybox2/

8
Laurent BILLON