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

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

这个问题的答案取决于你'make it become responsive'的意思，以及你希望它如何回应。

通常，使用 vw、vh 和 % 等单位创建的尺寸会响应您的 window 尺寸。

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

将其放在 CSS 的末尾，当 window 等于或小于 600 像素时，弹出窗口 window 将向左对齐。

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

Answer 2

在弹出窗体上使用 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>

Answer 3

试试这个：

.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%);
}

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

How to create a responsive popup subscribe modal

html

javascript

css

popup

responsive