旋转和旋转后模态中断

Question

我正在从事一个计算机科学项目，我必须在其中制作一个网站。为此，我和我的搭档想要一个包含我们信息的模式。其中一项要求是我们让网站在不同的平台上运行。这就是问题所在。在让 phone 站立时在我的 phone 上打开模式工作正常，但是当过渡到横向时它会中断并且当我将它转回去时它不会 return 恢复正常。这是 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" class="modal-data" embed-html="pages/Tijmen.html"></article>

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

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

    <article id="modal" class="modal">

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

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

    </article>

    <script>
        embedHTML();
    </script>

</body>

</html>

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;
    
}

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;
}

当然还有显示问题的视频。 https://youtu.be/s3bsN72-qYE

Answer 1

您可以将 css max-height 和 overflow-y 添加到您的模式 content 以在模式内为内容提供滚动条并确保模态不超出页面。

这可能需要@media 查询，例如

article {
  overflow-y: auto;
}

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

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

或者可以使用相对高度设置更好，例如 % 或 vh (reference)

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

旋转和旋转后模态中断

Modal breaks after rotating and rotating back

html

javascript

css

modal-dialog