Question

作为我的HTML5 / CSS3应用程序的一部分，我需要实现zoomable图像弹出窗口。当用户点击一个小图像时，会出现一个全屏弹出窗口，其中间包含该图像，其上方有一个标题，另一个按钮用于关闭其下方的弹出窗口。单击图像然后删除任何缩放并将其全尺寸放在中间的框中以允许滚动 - 使用标题和＆＃34;关闭＆＃34;按住上方和下方的按钮。

我使用flex（出于多种原因，包括垂直居中内容）。整体弹出工作，看起来很好。点击图片确实增加了它的大小，但它调整了框的大小，以便＆＃34;完成＆＃34;按钮被推到整个弹出窗口下方。

这里是jsfiddle demonstrating the issue

我不介意盒子调整大小 - 查看/滚动较大图像的空间越大 - 但我需要确保底部的按钮相对于弹出窗口的底边保持不变。

我的HTML看起来像这样（我用随机图像进行演示）：

<div id="overlay" class="hidden">
    <div id="alsg">
        <div class="intro">Assist with ALS</div>
        <div class="box scrollable">
            <img src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Male_monarch_butterfly.JPG" class="fit" />
        </div>

        <div class="popup-buttons">
            <div id="button-alsg-done" class="button button-state-action button-green right">Done</div>
            <div class="clear"></div>
        </div>
    </div> <!-- alsg -->
</div>

使用javascript

$('img', '#alsg').on('click', function(e) {
    $(this).toggleClass('fit');
});

遗憾的是，有很多CSS。你会注意到灵活和老派定位的结合非常糟糕。这是因为应用程序最初根本没有使用flex，而且我现在处于缓慢的迁移/清理过程中。

div#overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 104;
    display: flex;
    align-items: center;
    justify-content: center;
}

div#overlay > div {
    position: relative;
    width: calc(100% - 40px);
    margin: 10px auto;
    background-color: #A9A9A9;
    border-radius: 8px;
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
div#alsg {
    max-height: calc(100% - 40px) !important;
}

div#overlay div.intro {
    color: #FFF !important;
    font-size: 12pt;
    margin-bottom: 10px;
}

div#overlay div.box, div.template div.box {
    padding: 3px 5px;
    overflow: hidden;
    font-weight: bold;
    position: relative;
    flex-grow: 1;
}
div#alsg div.box {
    text-align: center;
    position: relative;
    overflow: auto !important;
    margin: 10px 0px 0px !important;
}
div.box {
    background-color: #FFF;
    color: #27374A;
    border-radius: 8px;
    border: 3px solid #FBE96E;
    position: relative;
    margin: auto;
    flex-shrink: 1;
}

.fit {
    max-width: calc(100% - 4px) !important;
    max-height: calc(100% - 4px) !important;
}

div.popup-buttons {
    margin-top: 10px;
}

#overlay .button.right {
    margin-left: 10px;
}
#button-alsg-done {
    margin-top: 10px;
    flex-basis: 25px;
}
div.button-green {
    background-color: #2CC55D;
    color: #FFF;
    font-weight: bold;
}
div.button-state-action {
    height: 25px;
    padding: 0px 5px;
    line-height: 25px;
    text-align: center;
    border-radius: 4px;
    font-size: 10pt;
    font-weight: normal !important;
    width: 60px;
    cursor: pointer;
    margin-bottom: 5px;
}
div.button {
    height: 22px;
    padding: 0px 2px;
    line-height: 22px;
    text-align: center;
    border-radius: 4px;
    font-size: 9pt;
    width: 42px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.right {
    float: right;
}

.clear {
    clear: both;
}

调整Flex框内div的内容会将其他内容推送到框外

0 个答案: