How to interact with the content of an iframe (specifically with images here)

I know this question has been asked before but my situation is a bit more complicated as it involves switching between the iframes kinda?

Basically i have a main page called index.html
Here is it’s code:
https://codepen.io/doresolre/pen/NWoZVOL

<style> 
.main {
    height: 480px;
    width: 753px;
    background-image: url('https://files.catbox.moe/boh6j7.jpg');
    position: relative;
}

.main iframe {
    border: none;
    border: none;
    position: absolute;
    top: 35px;
    left: 7px;
    width: 739px;
    height: 439px;
</style>    
    <div class="wrapper">
        <div class="header">
            <a href="home.html" target="content"><img src="https://files.catbox.moe/2ec24l.gif" class="header-image"></a>
            <div class="menu">
                <a href="entrence.html" target="content">Home</a> / 
                <a href="test2.html" target="content">Portfolio</a> / 
                <a href="about.html" target="content">Interests</a> / 
                <a href="links.html" target="content">More</a>
            </div>
        </div>
        <div class="main">
            <iframe name="content" src="entrence.html"></iframe>
        </div>
    </div>
</body>
</html>

As you can see inside of index.html there’s an iframe that switches between pages but the outside of the iframe stays the same.

Now, one of the pages that takes place in the iframe is a photo gallery. When you click on the photo at the top left, another pop-up draggable window appears with another iframe that tell you more about the picture like this:
https://codepen.io/doresolre/pen/NWoZVeO

    <script>
        window.onload = function () {
            var draggableDiv = document.getElementById("myWindow");
            var specificImage = document.getElementById("specificImage");
            var closeButton = document.querySelector(".red");
          
            specificImage.addEventListener("click", function () {
                draggableDiv.style.display = "block"; // Display the window on click
            });
          
           closeButton.addEventListener("click", function () {
                draggableDiv.style.display = "none"; // Hide the window on red button click
            });

            var posX = 0,
                posY = 0;
            var draggable = false;

            draggableDiv.addEventListener("mousedown", function (event) {
                draggable = true;
                posX = event.clientX - draggableDiv.offsetLeft;
                posY = event.clientY - draggableDiv.offsetTop;
            });

            window.addEventListener("mousemove", function (event) {
                if (draggable) {
                    draggableDiv.style.left = event.clientX - posX + "px";
                    draggableDiv.style.top = event.clientY - posY + "px";
                }
            });

            window.addEventListener("mouseup", function () {
                draggable = false;
            });
        };
    </script>
 <section class="tiles-a">
        <ul>
            
            <li>
                <a href="#" id="specificImage" style="background: url('my image'); background-size: cover;">
                </a>
            </li>
            
            <li>
                <a href="#" style="background: url('my image'); background-size: cover;">
                </a>
            </li>
            
            <li>
                <a href="#" style="background: url('my image'); background-size: cover;">
                </a>
            </li>
            
            <li>
                <a href="#" style="background: url('my image'); background-size: cover;">
                </a>
            </li>
            
            <li>
                <a href="#" style="background: url('my image'); background-size: cover;">
                </a>
            </li>
            
            <li>
                <a href="#" style="background: url('my image'); background-size: cover;">
                </a>
            </li>
            
        </ul>
    </section>
  
</body>

</html>

However, since the second iframe is included in another iframe it ends up looking like this:failed iframe in frame
To give you an idea of what i’d like it to look like this is another site a found that has the same idea: https://prevuefrix.neocities.org
Here, when you click on view a pop up opens with a draggable besides the index page

So basically my problem is I’d like for the window page (=the second iframe) to be outside of both the iframes, even tho it appears when you click an image that’s inside the first iframe if that makes sense (i’ll answer any comments if you need more explaining)