I am currently in the process of building a website that includes a lengthy page with full-page slides, each featuring two clickable images that open modal windows when clicked.
The issue I am facing with my modals is that I have set them at a specific distance from the top, which works fine for the first slide but becomes problematic for subsequent slides.
One approach I am considering to address this problem is using nth-child. Since each slide contains 2 images, I thought about adding 100% to 3 and 4, 200% to 5 and 6, and so on...
However, I have been unsuccessful in getting nth-child to work as expected. Here is a snippet of my CSS:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
color:blue;
left: 22%;
width:80%;
height:90%;
top:103%;
z-index: 9;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:nth-of-type(1){
color:yellow;
top: 203%;
}<div id="slide1" class="slide">
<div class="title">
blah blah
</div>
<div class="tooltip">
<a href="#openModal">
<img src="ONE.png">
<p class="tooltiptext">yup</p>
</a>
</div>
<div class="tooltip">
<a href="#openModal2">
<img src="two.png">
<p class="tooltiptext">aye..</p>
</a>
</div>
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>descriptions</h2>
<img src="ONE.png">
</div>
</div>
<div id="openModal2" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>desc</h2>
<img src="two.png">
</div>
</div>
</div> As the slide number increases, the openModal also increments (e.g., slide3 has openModal5 and 6).
Unfortunately, I am struggling to make nth-of-type or other methods like nth-child work properly. I can't even get the second modal on the first slide to change its properties. I'm simply looking to elicit some sort of response with the code snippet provided above.
What could I be doing incorrectly here?