Question

所以我在我的主页上有这个弹出窗口，我填写了一些内容。我遇到的问题是它早早调整了方法。

我不希望弹出窗口在调整窗口大小之前调整大小。我怎么解决这个问题？已经有一段时间了，无法弄清楚。

您可以在jsiffle网址中试用它，调整预览窗口的宽度，然后在它甚至需要之前看到它缩小。

CSS：

#popup {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.75);
    z-index: 2;
}
#popup #loading {
    height: 32px;
    width: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: url('../img/ajax-loading.gif') no-repeat;
    background-size: 32px 32px;
    display: inline-block;
}
#popup #container {
    max-width: 95%;
    max-height: 95%;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: #111;

    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}
#popup #content {
    width: 100%;
    font-family: 'Oxygen', sans-serif;
    font-size: 12px;
    color: #ccc;
    text-align: left;
    line-height: 16px;
}

#popup #close {
    width: 20px;
    height: 16px;
    padding: 4px 0 0 0;
    border: 1px solid #333;
    border-radius: 50%;
    float: right;
    background: #222;
    position: absolute;
    top: -7px;
    right: -7px;

    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    text-align: center;
    color: #fff;
    line-height: 12px;

    cursor: pointer;
}
#popup #close:before {
    content: 'X';
}

HTML：

<div id="popup">
    <div id="container">
        <div id="close"></div>
        <div id="content">
            <p>Very long string in here that should not get cut off until window width is too small. If you understand what I'm saying.</p>
        </div>
    </div>
</div>

Answer 1

尝试更改容器的宽度，如此＆＃34;

#popup #container { max-width: 255px; width: 75%; }

因此，在较大的屏幕上，它将是255px的固定宽度，在较小的屏幕上，它将缩小到75％的宽度。

不需要时弹出窗口宽度调整大小

1 个答案: