Åbne Modal Image fra iFrame?

Her kan du få hjælp og stille spørgsmål til JavaScript!
Besvar
Styggi75
Begynder
Indlæg: 4
Tilmeldt: 12. aug 2017, 21:38

Åbne Modal Image fra iFrame?

Indlæg af Styggi75 » 12. aug 2017, 22:18

Hej!

Jeg håber, at nogen kan hjælpe mig med dette: Jeg har længe prøvet at få åbnet Modal Images fra en iFrame, men de åbnes kun i selve iFramen og ikke i hele vinduet som jeg gerne vil. Er der nogen, der ved hvordan?

Jeg har brugt w3schools script som kode.

Dokument:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title>Test</title>
</head>
<body>
<table
style="width: 800px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr style="font-weight: bold;">
<big></big><td><big><big>Åbne Modal
Image fra iFrame?</big></big></td>
<big></big></tr>
<tr>
<td style="height: 20px;"></td>
</tr>
<tr>
<td><iframe src="image_modal.html" name="I1"
frameborder="0" height="560" scrolling="no"
width="100%"></iframe>
</td>
</tr>
</tbody>
</table>
</body>
</html>


iFrame:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
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.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption { -webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)} to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<title>image_modal</title>
</head>
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box)
that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the
current
image inside the modal when it is clicked on. Also note that we use the
value from the image's "alt" attribute as an image caption text inside
the modal.</p>
<img id="myImg"
src="https://www.w3schools.com/howto/img_fjords.jpg"
alt="Trolltunga, Norway" height="200" width="300">
<!-- The Modal -->
<div id="myModal" class="modal"><span
class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() { modal.style.display = "none";
}
</script>
</body>
</html>

Besvar