html - 响应式弹出窗口 CSS

问题描述

当用户单击特定链接时会显示一个弹出窗口。. 我不知道如何使它响应。在较小的屏幕上，弹出窗口的底部超出范围。

HTML 代码：

<div class="popup-wrapper">
    <div class="popup">
        <div class="popup-close">x</div>
            <div class="popup-content">
                <h2>Job Details</h2>
                <div class="popup-job-description">

                    <div class="job-descriptions">
                        <p><span class="popup-job-description-title">Title: </span>Process Engineer</p>
                    </div>

                    <div class="job-descriptions">
                            <p><span class="popup-job-description-company">Company: </span>Undisclosed</p>
                    </div>

                    <div class="job-descriptions">
                            <p><span class="popup-job-description-location">Location: </span>Naypyitaw</p>
                    </div>
                    <div class="job-descriptions">
                            <p><span class="popup-job-description-location">Salary: </span>$75,000</p>
                    </div>
                    <div class="job-descriptions">
                            <p><span class="popup-job-description-description">Description: </span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa et similique ex, iusto sint in ratione aut magnam! Accusamus eveniet aspernatur nihil? Distinctio vel fugiat eius eaque? Quas earum adipisci quis voluptate animi id atque alias. Sapiente aut explicabo voluptate!</p>
                    </div>

                    <div class="job-descriptions requirements">
                            <p><span class="popup-job-description-requirements">Requirements: </span><ul>
                                <li>Bachelor's degree</li>
                                <li>At least 3 years of experience in a similar position</li>
                                <li>Fluent in English and Mandarin</li>
                            </ul></p>
                </div>
                <a class="apply-button" href="#">Apply Now</a>
            </div>
    </div>

这里的 CSS：

/工作弹出/

.model{
    width:100%;
    height:100%;
    background-color: black;
    opacity: 0.5;
    position: absolute;
    top:0;
}

.popup-wrapper{
    opacity: 1;
    background: rgba(0,0,0,0.5);
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: none;
}

.popup-wrapper .popup{
    max-width: 60%;
    min-width: 40%;
    background: white;
    margin: auto auto;
    padding: 4rem 2rem 4rem 2rem;
}

.popup-wrapper .popup h2{
    text-align: center;
    color:#0b1f49;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.popup-wrapper .popup-close{
    position:absolute;
    top:8%;
    right:22%;
    cursor:pointer;
    font-size: 22px;

}

.popup-wrapper .popup a{
    background:#5286ec;
    color:white;
    text-decoration:none;
    padding:20px 35px;
    position:relative;
}

.popup-job-description{
    align-content:
}

.job-descriptions {
    padding:0.75rem;
}

.job-descriptions span{
    color:#2260dd;
    font-weight: bold;
    letter-spacing: 1.5px;
}

.popup-job-description .requirements ul{
    margin: 0rem 0rem 2.5rem 1rem;
}

.popup-job-description .requirements li{
    font-size: 18px;
    margin: 5px;
}

我还有一个小问题，您可能已经注意到弹出窗口右上角的“x”或关闭窗口，我使用绝对值作为显示，但它似乎确实有效。

标签： htmlcssfrontend

html - 响应式弹出窗口 CSS

问题描述

解决方案

推荐阅读