点击

时间:2018-04-02 19:59:19

标签: image modal-dialog popup

我试图让这个图片在点击时打开一个模态弹出窗口但是没有触发click事件。我查了几个小时的代码,无法找到JavaScript函数的错误,或者它是否是我不知道的类名。

可能出现什么问题?

这些是代码:

    <section class="news">  
                    <div>

                <section id="info-noticias">
                    <h1>teste</h1>
                    <p>
                        Data publicação: 02/04/2018                            
                        Publicado por: Rafael Heros de Almeida                        </p>
                </section>
                <!--<section id="banner-noticia"></section>-->
                <section id="conteudo-noticia"><p><img class="myImg" src="http://camaracampina.pr.gov.br/paineldecontrole/images/imgnoticia/3.jpg" alt="" width="675" height="386"></p></section>
                <section id="tags"><b>Tags de pesquisa:</b> </section>

                                            </div>
                </section>

                <!-- The Modal -->
                <div id="myModal" class="modal">
                  <span class="close">×</span>
                  <img class="modal-content" id="img01">
                </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 imgem = document.getElementsByClassName("myImg");
                  var modalImg = document.getElementById("img01");
                  var captionText = document.getElementById("caption");
                  imgem.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>

    </section>

CSS:

.myImg {
    border - radius: 5 px;
    cursor: pointer;
    transition: 0.3 s;
}
.myImg: hover { opacity: 0.7; }
    /* The Modal (background) */
    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z - index: 30; /* Sit on top */
        padding - top: 100 px; /* 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 img {
        margin: auto;
        display: block;
        width: 80 % ;
        max - width: 700 px;
    }
    /* Add Animation */
    .modal - content {
        -webkit - animation - name: zoom; -
        webkit - animation - duration: 0.6 s;
        animation - name: zoom;
        animation - duration: 0.6 s;
    }
@ - 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: 15 px;
    right: 35 px;
    color: #f1f1f1;
    font - size: 40 px;
    font - weight: bold;
    transition: 0.3 s;
}
.close: hover,
    .close: focus {
        color: #bbb;
        text - decoration: none;
        cursor: pointer;
    }
/* 100% Image Width on Smaller Screens */
@media only screen and(max - width: 700 px) {
    .modal - content {
        width: 100 % ;
    }
}.    

1 个答案:

答案 0 :(得分:1)

试试这个:

<section class="news">
    <div>
        <section id="info-noticias">
            <h1>teste</h1>
            <p>
                Data publicação: 02/04/2018 Publicado por: Rafael Heros de Almeida </p>
        </section>
        <!--<section id="banner-noticia"></section>-->
        <section id="conteudo-noticia">
            <img id="myImg" src="http://camaracampina.pr.gov.br/paineldecontrole/images/imgnoticia/3.jpg" alt="Trolltunga, Norway" width="675" height="386">
            <section id="tags"><b>Tags de pesquisa:</b> </section>
        </section>
    </div>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">&times;</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 imgem = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    imgem.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() {
        console.log("entra");
        modal.style.display = "none";
    }
    </script>
</section>

我的评论:

imgem.onclick (onclick function goes on lower case)

我将getElementByClass更改为getElementById