HTML / CSS Popup div sur le texte cliquer [fermé]

je veux faire popup div au lieu de popup window pour mon image/page' About ' avec le bouton courant comme dans cet exemple: OMG! Ubuntu! Facebook like popup

43
demandé sur static_rtti 2013-09-28 12:31:39

3 réponses

DEMO

Dans la zone de contenu, vous pouvez fournir tout ce dont vous souhaitez afficher.

.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>
131
répondu coder 2016-09-26 08:54:14

Vous pouvez simplement utiliser jQuery UI Dialog

Exemple:

$(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>
14
répondu Yair Nevet 2016-09-26 08:13:50

Par souci d'exhaustivité, ce que vous essayez de créer une "fenêtre modale".

de nombreuses solutions JS vous permettent de les créer facilement, prenez le temps de trouver celle qui convient le mieux à vos besoins.

J'ai utilisé Tinybox 2 pour des petits projets : http://sandbox.scriptiny.com/tinybox2/

8
répondu Laurent BILLON 2013-09-28 08:39:29