Question

我正在尝试重新调整W3图像模式代码以在同一页面中打开多个模态。我在这里一起解决了答案的解决方案，但只有在我刷新浏览器页面（叹气）时它才有效。

我有这么多时间进入这个并且无法得到它......任何帮助都会被疯狂地欣赏。在此先感谢!!!

HTML（显示第一个实例，然后是实例）：

    <div class="two-column"> <br>
    <!-- Start Pop-Up --> 
        <img class="myImg" src="img/projects/precisionplanting/PPL003_Website_Home-YieldSense.jpg" width="100%">

        <!-- The Modal -->
        <div id="myModal" class="modal">
            <!-- Modal Content (The Image) -->
            <img class="modal-content" id="img01">
        </div>
    <!-- End Pop-Up -->

    </div>

    <div class="clear"></div>


</div>

<ul class="portfolio-grid">

    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]"> 
    <!-- Start Pop-Up --> 
        <img class="myImg" src="img/projects/precisionplanting/PPL003_Website_Home-vDrive.jpg"> 
    <!-- End Pop-Up --> 
    </li>

    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]"> 
    <!-- Start Pop-Up --> 
        <img class="myImg" src="img/projects/precisionplanting/PPL003_Website_Home-STube.jpg"> 
    <!-- End Pop-Up --> 
    </li>

    <li class="grid-item" data-jkit="[show:delay=3000;speed=500;animation=fade]"> 
    <!-- Start Pop-Up --> 
        <img class="myImg" src="img/projects/precisionplanting/PPL003_Website_Home-AD-CS.jpg"> 
    <!-- End Pop-Up --> 
    </li>

</ul>

JAVASCRIPT：

<script>
// Get the modal

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal

var img = $('.myImg');
var modalImg = $("#img01");
$('.myImg').click(function(){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
});

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("modal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
</script>

Answer 1

无法正确理解您的代码。但我明白的是，当你点击ui img时，你去了#myModal里面显示图像。如果我的理解是正确的，那么这应该有效;

<script type="text/javascript">
    $(function () {

        $('.myImg').click(function () {

                var newSrc = this.src;
                $("#img01").attr('src', newSrc);
            });

        // When the user clicks on <span> (x), close the modal
        $('#myModal').click(function () {
            var modal = this;
            var img = $('.myImg');
            var modalImg = $("#img01");

            modal.style.display = "none";
        });
            });
    </script>

Answer 2

非常感谢你的回复！一位朋友真的开始工作了。由于AJAX，我需要将js添加到索引页面（实际上是所有页面）。我将js更新为：

<script>
// Get the modal

var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal

var img = $('.myImg');
var modalImg = $("#img01");
$("body").on("click",'.myImg', function(event){
    modal.style.display = "block";
    var newSrc = this.src;
    modalImg.attr('src', newSrc);
});

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("modal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
</script>

我认为关闭modal js代码仍然关闭，Chrome js控制台抛出此错误：“Uncaught TypeError：无法设置属性'onclick'未定义”

W3多模态在同一页面 - 页面刷新

2 个答案: