如何创建响应式弹出订阅模式

Question

我正在尝试创建一个订阅弹出窗口，供用户单击订阅按钮并接收通知。

有谁知道如何使这个弹出窗口变得响应？我的任务需要这个。按钮和弹出容器需要响应。我在@media 中尝试过width:100%，但按钮的宽度会变得太长。通知部分我已经完成了。

我该如何解决这个问题？请提供一些解决方案。谢谢

function subOpen() {
    document.getElementById("sub").style.display = "block";
}
function subClose() {
    document.getElementById("sub").style.display = "none";
}

        .subscribe{
    box-sizing: border-box;
}
.open-button {
    background-color:cornflowerblue;
    color: black;
    font-weight: bold;
    padding: 16px 15px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    width: 15%;
    border-radius: 5px;
}
.sub-title{
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
}       
.sub-p{
    text-align: center;
    font-size: 1;
}
/* The popup form - hidden by default */
.sub-popup {
    display: none;
    position: fixed;
    bottom:100px;
    left:500px;
    border: none;
    border-radius:5px;
    z-index: 9;
}

#sub {
    max-width: 300px;
    padding: 10px;
    background-color:beige;
}
/* Set a style for the subscribe button */
#sub .btn {
    background-color: #04AA6D;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width:50%;           
    margin-bottom:10px;
    margin-left: 70px;
    opacity: 0.8;
}
#sub .cancel {
    background-color: red;
}
#sub .btn:hover, .open-button:hover {
    opacity: 1;
}

 <div class= "subscribe">
    <button class="open-button" onclick="subOpen()">SUBSCRIBE</button>
    <div class="sub-popup" id="sub">
        <h4 class="sub-title container">SUBSCRIBE US</h4>
        <p class="sub-p">Click to receive notification to get our updates and special offers now!</p>                               
        <button type="submit" class="btn subscribeBtn">Subscribe</button>
        <button type="button" class="btn cancel" onclick="subClose()">Close</button>
    </div>
</div>

Answer 1

试试这个：

.subscribe {
    box-sizing: border-box;
    position: relative;
}

.sub-popup {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    border: none;
    border-radius: 5px;
    z-index: 9;
    transform: translate(-50%, 50%);
}

Answer 2

这个问题的答案取决于你所说的“让它变得响应”的意思，以及你希望它如何响应。

一般来说，使用 vw、vh 和 % 等单位会创建与窗口大小相应的大小。

如果您希望在特定维度更改样式，可以使用媒体查询。

将其放在 CSS 的末尾，当您的窗口为 600 像素或更少时，您的弹出窗口将向左对齐。

@media (max-width: 600px){
.sub-popup{
    left: 0px;
}

Answer 3

在弹出表单上使用 px 定位的左侧和底部弄乱了响应能力，我想到的第一个修复是用 margin 0 auto 替换它们，这基本上将其居中在它的父容器中。
如果您使用的是绝对单位 (px)，则需要设置媒体查询以匹配不同的屏幕尺寸并相应地更改值。
我并不是说使用 px 进行大小调整不好，这实际上取决于您要实现的目标，因此熟悉不同的单位确实会派上用场。
实际上有很多解决方案，包括 flexbox、bootstrap、媒体查询、使用相对单位。

希望这些好书可以帮助到你。
W3 CSS Units
What’s The Difference Between PX, EM, REM, %, VW, and VH?

function subOpen() {
    document.getElementById("sub").style.display = "block";
}
function subClose() {
    document.getElementById("sub").style.display = "none";
}

        .subscribe{
    box-sizing: border-box;
}
.open-button {
    background-color:cornflowerblue;
    color: black;
    font-weight: bold;
    padding: 16px 15px;
    border: none;
    cursor: pointer;
    opacity: 0.8;
    width: 15%;
    border-radius: 5px;
}
.sub-title{
    margin-top: 30px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
}       
.sub-p{
    text-align: center;
    font-size: 1;
}
/* The popup form - hidden by default */
.sub-popup {
    display: none;
    position: fixed;
    margin: 0 auto; // replaced left and bottom positioning with margin 0 auto
    border: none;
    border-radius:5px;
    z-index: 9;
}

#sub {
    max-width: 300px;
    padding: 10px;
    background-color:beige;
}
/* Set a style for the subscribe button */
#sub .btn {
    background-color: #04AA6D;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width:50%;           
    margin-bottom:10px;
    margin-left: 70px;
    opacity: 0.8;
}
#sub .cancel {
    background-color: red;
}
#sub .btn:hover, .open-button:hover {
    opacity: 1;
}

 <div class= "subscribe">
    <button class="open-button" onclick="subOpen()">SUBSCRIBE</button>
    <div class="sub-popup" id="sub">
        <h4 class="sub-title container">SUBSCRIBE US</h4>
        <p class="sub-p">Click to receive notification to get our updates and special offers now!</p>                               
        <button type="submit" class="btn subscribeBtn">Subscribe</button>
        <button type="button" class="btn cancel" onclick="subClose()">Close</button>
    </div>
</div>