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