Image pop up over index - Tutorial Guruji

I can’t get the pop up window to work like https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img. Whenever i press my images it doesn’t do anything. I checked a whole lot of times but i can’t find the issue. Am i overwriting something in css? https://jsfiddle.net/m3xyqt2w/

var modal = document.getElementById('myModal')
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;
};

var span = document.getElementsByClassName('close')[0];

span.onclick = function() {
  modal.style.display = 'none';
};

<div class="outline">
  <div class="picturesOutline">
    <div class="column">
      <img id="myImg" src="pictures/pic1.jpg" />

      <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01" />
        <div id="caption">Description</div>
      </div>
    </div>
  </div>
</div>

Answer

You have this problem because of your <script> </script> position. If you put them down side of the body it will work without problem. Your code is fine.

.outline {
    max-width: 75%;
    margin: auto;
}

.picturesOutline {
    display: flex;
    margin: auto;
    flex-wrap: wrap;
}
.column {
    max-width: 25%;
    padding: 0 0%;
    flex: 25%;
}
.column img {
    vertical-align: middle;
    width: 100%;
    padding: 10% 10%;
}
.column img:hover {
    opacity: 0.7;
    cursor: pointer;
    transition: 0.3s;
}

img:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
}
body {
    max-width: 1500px;
    margin: auto;
}
* {
    box-sizing: border-box;
}
div {
    display: block;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
        <title>Document</title>
        <style>
            .modal {
                display: none;
                position: fixed;
                z-index: 1;
                padding-top: 100px;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgb(0, 0, 0);
                background-color: rgba(0, 0, 0, 0.9);
            }
            .modal-content {
                margin: auto;
                display: block;
                width: 80%;
                max-width: 700px;
            }
            .modal-content,
            #caption {
                -webkit-animation-name: zoom;
                -webkit-animation-duration: 0.6s;
                animation-name: zoom;
                animation-duration: 0.6s;
            }
            .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;
            }

            @-webkit-keyframes zoom {
                from {
                    -webkit-transform: scale(0);
                }
                to {
                    -webkit-transform: scale(1);
                }
            }

            @keyframes zoom {
                from {
                    transform: scale(0);
                }
                to {
                    transform: scale(1);
                }
            }
            @media only screen and (max-width: 700px) {
                .modal-content {
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        
        <div class="outline">
            <div class="picturesOutline">
                <div class="column">
                    <img id="myImg" src="pictures/pic1.jpg" />

                    <div id="myModal" class="modal">
                        <span class="close">&times;</span>
                        <img class="modal-content" id="img01" />
                        <div id="caption">Description</div>
                    </div>
                </div>
               
            </div>
        </div>
        <script>
            var modal = document.getElementById('myModal');

            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;
            };

            var span = document.getElementsByClassName('close')[0];

            span.onclick = function () {
                modal.style.display = 'none';
            };
        </script>
    </body>
</html>

Answer

Leave a Reply Cancel reply