Modal breaks after rotating and rotating back-CodePudding

I'm working on a project for computer science where I have to make a website. For this, me and my partner wanted a modal with information about us. One of the requirements is that we make the site work on different platforms. This is where the problem lies. Opening the modal on my phone while having the phone standing up works fine, but when transitioning to landscape it breaks and it does not return to normal when I turn it back. Here is a snippet of the html:

<!DOCTYPE html>

<html lang="en">

<head>

    <title>Machine Learning</title>

    <script src="scripts/embedHTML.js"></script>

    <script src="scripts/popUp.js"></script>

    <script src="scripts/underline.js"></script>

    <script src="scripts/modal.js"></script>

    <link rel="stylesheet" href="stylesheets/main.css" />

    <link rel="stylesheet" href="stylesheets/about-us.css" />

    <link rel="stylesheet" href="stylesheets/popup.css" />

    <link rel="stylesheet" href="stylesheets/modal.css" />

    <link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    
</head>

<body>

    <header>

        <img id="logo" src="images/logo.png" alt="logo image"></img>
        
        <h1 id="title">Machine Learning</h1>
        
    </header>

    <article id="about-tijmen"  embed-html="pages/Tijmen.html"></article>

    <article id="about-marijn"  embed-html="pages/Marijn.html"></article>

    <div id="glass-pane" ></div>

    <article id="modal" >

        <button id="closeModalButton" onclick="toggleModal()">x</button>

        <article id="modal-dialogue"></article>

    </article>

    <script>
        embedHTML();
    </script>

</body>

</html>

The CSS:

.modal-data
{
    display: none;
}

.modal {
    pointer-events: none;
    opacity: 0;
    position: fixed;
    z-index: 1000;
    background: red;
    border-radius: 20px;
    border: 2px solid black;
    margin-top: 0px;
    padding-bottom: 20px;
    left: 50%;
    top: 50%;
    transition: opacity .25s linear, display .25s linear;
    transform: translateX(-50%) translateY(-50%);
    overflow: hidden;
    box-shadow: 0 0 100px 10px black inset;
    width: 80vw;
}

.modal.open
{
    pointer-events: all;
    opacity: 100;
}

.glass-pane
{
    pointer-events: none;
    transition: opacity .25s linear;
    background: rgba(0, 102, 255, 0.5);
    z-index: 110;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    opacity: 0;
}

.glass-pane.shown
{
    pointer-events: all;
    opacity: 1;
}

#closeModalButton {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    line-height: 20px;
    margin: 0;
    border: 2px solid black;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-left-radius: 20px;
    cursor: pointer;
    font-size: 15px;
}

#modal-dialogue p {
    color: rgb(250, 232, 235);
    width: 90%;
    margin: auto; 
    margin-top: 2%; 
}

ol{
    color: rgb(250, 232, 235);
    display: table;
    margin: 0 auto;
    
}

The javascript:

function toggleModal()
{
    let modal = document.getElementById("modal");

    let glass = document.getElementById("glass-pane")

    if(modal.classList.contains("open"))
    {
        modal.classList.remove("open");
        glass.classList.remove("shown");
    }
    else
    {
        modal.classList.add("open");
        glass.classList.add("shown");
    }
}

function setModalContent(id)
{
    let dialogue = document.getElementById("modal-dialogue");

    let data = document.getElementById(id);

    dialogue.innerHTML = data.innerHTML;
}

and, of course, a video showing the problem. https://youtu.be/s3bsN72-qYE

CodePudding user response：

You can add css max-height and overflow-y to your modal content to give the content a scrollbar inside the modal and ensure the modal doesn't go outside the page.

This may need an @media query, eg

article {
  overflow-y: auto;
}

@media screen (height:300px) {
  article {
    max-height: 200px;
  }
}

@media screen (height:600px) {
  article {
    max-height: 400px;
  }
}

or may be set better using relative height such as % or vh (reference)

article {
  max-height: 75vh;
  overflow-y: auto;
}