Hvordan lukker jeg en Modal udenfor billedet?

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
Hvordan lukker jeg en Modal udenfor billedet?

Indlæg af Styggi75 » 1. jul 2018, 23:20

Jeg søger et script til at lukke en Modal ved at klikke udenfor billedet, jeg har prøvet mange forskellige forslag, men desværre uden virkning. Den bedste jeg kunne finde får desværre Modalen til at lukke ved at klikke på selve billedet, og det ønsker jeg ikke da jeg skulle kunne bladre i billederne

Kode: Vælg alt

<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <style>div.desk {
width: 1520px; background-color: rgb(102, 102, 102);
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2), 0 15px 20px 0 rgba(0, 0, 0, 0.5);
text-align: center;
}
div.container {
padding: 0px;
}
  </style>
  <style>
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
.column:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1000px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 20px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
color: white;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
color: white;
}
  </style>
</head>
<body>
<div id="myModal" class="modal"><span
 class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides"><img src="01.jpg"
 style="width: 100%;"></div>
<div class="mySlides">
<img src="02.jpg" style="width: 100%;"></div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
</div>
</div>
<table style="text-align: left;" border="0"
 cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td style="vertical-align: top;">
      <table style="text-align: left; width: 100%;" border="0"
 cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td>
            <div class="column"><img alt=""
 src="01.jpg" style="width: 270px;"
 onclick="openModal();currentSlide(1)"
 class="hover-shadow cursor"></div>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
      <td style="width: 20px;"></td>
      <td style="vertical-align: top;">
      <table style="text-align: left; width: 100%;" border="0"
 cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td>
            <div class="column"><img alt=""
 src="02.jpg" style="width: 270px;"
 onclick="openModal();currentSlide(2)"
 class="hover-shadow cursor"></div>
            </td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Hvordan lukker jeg en Modal udenfor billedet?

Indlæg af cristian » 2. jul 2018, 11:07

Du skal (vil jeg forslå) JavaScripts onClick event.

Se eksempler med jQuery her, jQuery er en JavaScript wrapper der tager noget af komplexiteten ud af JavaScript.
https://stackoverflow.com/questions/152 ... an-element

Læs hvad et event er her
https://www.w3schools.com/js/js_events.asp

Styggi75
Begynder
Indlæg:4
Tilmeldt:12. aug 2017, 21:38

Re: Hvordan lukker jeg en Modal udenfor billedet?

Indlæg af Styggi75 » 2. jul 2018, 12:43

Jeg har brugt dette script, men det får modalen til at lukke, når jeg også trykker på billedet, og det skal den jo ikke, da jeg jo skulle kunne bladre i billederne

Kode: Vælg alt

var modal = document.getElementById('myModal');
modal.addEventListener('click',function(){
this.style.display="none";
})


cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: Hvordan lukker jeg en Modal udenfor billedet?

Indlæg af cristian » 3. jul 2018, 15:04

Så det du gerne vil have er
1. Når du trykker udenfor HTML billede elementet så skal hele elementet lukke.
2. Når du trykker "næste" -> så skal du "bladre" til højre til næste billede element.
3. Når du trykker "tilbage" -> så skal du "bladre" til venstre til forrige billede element.

Er det nogenlunde rigtige?

jepperask
Geni
Geni
Indlæg:378
Tilmeldt:4. nov 2012, 17:57

Re: Hvordan lukker jeg en Modal udenfor billedet?

Indlæg af jepperask » 3. jul 2018, 20:46

Styggi75 skrev:Jeg har brugt dette script, men det får modalen til at lukke, når jeg også trykker på billedet, og det skal den jo ikke, da jeg jo skulle kunne bladre i billederne

Kode: Vælg alt

var modal = document.getElementById('myModal');
modal.addEventListener('click',function(){
this.style.display="none";
})

I stedet for at tilføje click-listeneren til din modal, kan du tilføje den til hele document-elementet. I dit callback kan du så tjekke om det der er trykket på ikke er et af modal-elementerne. Alternativt kan du måske bruge dit overlay.

Styggi75
Begynder
Indlæg:4
Tilmeldt:12. aug 2017, 21:38

Re: Hvordan lukker jeg en Modal udenfor billedet?

Indlæg af Styggi75 » 4. jul 2018, 09:46

Til Christian

Ja det er præcis det jeg ønsker :) Jeg er ikke så god til html og css, men har kunnet finde de scripts jeg har via w3school og i et andre modals, men kan ikke rigtig få dem til at matche sammen, så har brug for lidt hjælp, og alt de gode forslag I kommer med, lyder som kinesisk for mig, da jeg ikke ved hvordan jeg skal gøre, jeg havde måske forventet for meget, idet jeg troede, at der var lige en, der havde sådan et script til, hvordan jeg lige lagde det ind, men det er måske ikke lige sådan til?

Besvar