onClick на моде изображения не запускается должным образом - PullRequest
Новая
       24

onClick на моде изображения не запускается должным образом

0 голосов
/ 07 декабря 2018

Создала модальную галерею изображений на подстранице, но изображение не отображается должным образом, когда я щелкаю по нему.Он появляется, когда я нажимаю на верхнюю строку меню.Это работает на странице 1. Тем не менее.

Так как мне заставить модальную работу на подстранице и последующих страницах? 

function onClick(element) {
    document.getElementById("img01").src = element.src;
    document.getElementById("modal01").style.display = "block";
    var captionText = document.getElementById("caption");
    captionText.innerHTML = element.alt;
    }
<div class="w3-row-padding w3-center">
<div class="w3-panel w3-deep-purple">
<h2 class="w3-opacity"><span style="color: #ffffff;">Island Lights Edition – 5 Dec</span></h2>
</div>
</div>
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<img src="/Portals/0/events/SentosaStyle/211118/Yuko-Tsuchiya_edited.jpg?ver=2018-12-06-102124-283" style="width: 100%;" class="w3-hover-opacity" onclick="onClick(this)" alt=" Naomi Yeo | @naomiyhs" />
<div class="w3-container w3-white w3-padding-16">
<p><strong> Naomi Yeo | @naomiyhs   </strong></p>
<p> I’m here at Island Lights to support Yang, who is the artist behind ASMR Wonderland. By day, I’m an actress, host and DJ on 987FM, and while I dress according to my mood or the vibe of the day, I usually have to be more dressed up because I work a lot with brands. However, today I thought, ‘why not stay comfy and cute in a matching set? </p>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<img src="/Portals/0/events/SentosaStyle/211118/Evelyn-Sim_edited.jpg?ver=2018-12-06-102124-410" style="width: 100%;" class="w3-hover-opacity" onclick="onClick(this)" alt=" Noor Dahiyah  | @nrdaya " />
<div class="w3-container w3-white w3-padding-16">
<p><strong> Noor Dahiyah | @nrdaya  </strong></p>
<p> It’s the school holidays so my classmates and I decided to come to Sentosa for a day at the beach, then stay in the evening for Island Lights. Most days I have to wear a uniform but since I’m here at Sentosa, I decided to tie my look together with a fun Hawaiian shirt.</p>
</div>
</div>
<div class="w3-third w3-container">
<img src="/Portals/0/events/SentosaStyle/211118/Berenice-Guerra_edited.jpg?ver=2018-12-06-102124-533" style="width: 100%;" class="w3-hover-opacity" onclick="onClick(this)" alt=" Irham | @1rhxmnx_x" />
<div class="w3-container w3-white w3-padding-16">
<p><strong> Irham | @1rhxmnx_x </strong></p>
<p>I actually borrowed this floral shirt from my friend specially for my day out at Sentosa, just so my outfit will suit a beachy, island vibe. My friends and I have been here the whole day and we went for a swim earlier, but I brought a change of clothes so I can dress up a bit for #OOTDs at Island Lights.</p>
</div>
</div>
<div id="modal01" class="w3-modal w3-black" style="padding-top: 0px; display: none;" onclick="this.style.display='none'">
<span class="w3-button w3-black w3-xlarge w3-display-topright">&times;</span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
<img alt="" id="img01" class="w3-image" width="80%" />
<p id="caption">&nbsp;</p>
</div>
</div>
...