Skip to main content
C
CélineBB
Participant
September 25, 2022
Question

Problème Affichage Photos en Pop Up

  • September 25, 2022
  • 1 reply
  • 119 views

Je suis en train de créer un site avec Dreamweaver. Dans ce cadre, je mets mes photos agrandies en pop up.

La photo agrandie s'ouvre en haut de la page concernée et non au niveau de la même photo petit format, ce qui est gênant quand la page est longue.

Y-a-t'il un moyen d'arriver à ce que la photo grand format s'ouvre au niveau de la photo petit format ?

Voici comment je crée ma photo en ^pop up sur un exemple :

<p align="center"><a href="#" onClick="window.open('psydney17.htm','aquarium2','width=420,height=892')"><img src="images/PhotosSite/Sydney/aquarium1.jpg" width="211" height="448" alt=""/></a></p>

This topic has been closed for replies.

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
September 25, 2022

Nobody uses pop-ups anymore.  You want a modal window.

 

 

Copy & paste this code into a new, blank document.  SaveAs modal.html to test.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Modal Window</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>
 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
} 
</style>
</head>
<body>
<!-- Trigger/Open The Modal-->
<img src="https://dummyimage.com/200x100" id="myBtn" alt="thumbnail image" title="Click to open">

<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<figure><img src="https://dummyimage.com/800x400" alt="Placeholder">
<figcaption>Lorem ipsum dolar...</figcaption>
</figure>
</div>
</div> 

<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the trigger that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When user clicks on the trigger, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}
// When user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
// When user clicks anywhere outside the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
} 
</script>
</body>
</html>

 

Hope that helps answer your question.

 

Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices