Question

我有一个弹出视图，因为有一个滚动视图和其他视图，如一些标签，按钮。但弹出视图的高度不会根据其子视图自动增加或减少。有没有办法做到这一点？

Answer 1

不确定您指的是什么语言或动机，但如果在Web开发条例中，请尝试这样做：

HTML：

  <div class="container">
    <h1>Responsive Popup</h1>
    <p>Click on the button below to view the responsive popup.</p>
    <button data-js="open">Open popup</button>
</div>

<div class="popup">
    <h2>This is my popup</h2>
    <button name="close">Close popup</button>
</div>

CSS：

@import "compass";

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}

body {
    background-color: #E3E3E3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 240px;
    text-align: center;

    .container {
        max-width: 400px;
        margin: 0 auto;
        padding: 30px;
        text-align: center;
        background: white;
        border-radius: 10px;
        border: 5px solid #9AD3DE;
        box-sizing: border-box;
    }
}

h1, p, h2, button {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 100;
    letter-spacing: 0.5px;
}

h1 {
    font-size: 40px;
    text-align: center;
    color: #666666;
    margin: 0 0 30px 0;
}

h2 {
    font-size: 34px;
    text-align: center;
    color: #666666;
    margin: 0 0 30px 0;
}

p {
    color: #666666;
    margin: 30px auto;
    text-align: center;
    font-size: 16px;
}

button {
    background: #89BDD3;
    border: 0;
    border-radius: 4px;
    padding: 7px 15px;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;

    &:focus {
        outline: none;
    }

    &:hover {
        background: lighten(#89BDD3, 10%);
    }
}

.popup {
    background: rgba(100, 100, 100, 0.6);
    position: fixed;
    display: none;
    z-index: 5000;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;

    > div {
        border-radius: 10px;
        position: fixed;
        background: #FFFFFF;
        box-shadow: 0px 0px 15px 0px rgba(#000000, 0.3);
        padding: 30px 15px;
        /* Width of popup can be changed */
        width: 70%;
        max-width: 600px;
        z-index: 5001;
        @include transform(translate(-50%, -50%));
        left: 50%;
       top: 50%;
        text-align: center;
        border: 5px solid #9AD3DE;
    }
}

JS：

function popupOpenClose(popup) {

    /* Add div inside popup for layout if one doesn't exist */
    if ($(".wrapper").length == 0){
        $(popup).wrapInner("<div class='wrapper'></div>");
    }

    /* Open popup */
    $(popup).show();

    /* Close popup if user clicks on background */
    $(popup).click(function(e) {
        if ( e.target == this ) {
            if ($(popup).is(':visible')) {
                $(popup).hide();
            }
        }
    });

    /* Close popup and remove errors if user clicks on cancel or close buttons */
    $(popup).find("button[name=close]").on("click", function() {
        if ($(".formElementError").is(':visible')) {
            $(".formElementError").remove();
        }
        $(popup).hide();
    });
}

$(document).ready(function () {
    $("[data-js=open]").on("click", function() {
        popupOpenClose($(".popup"));
    });
});

Answer 2

您可以使用superView创建比例高度约束，如此

popupView.heightAnchor.constraint(equalTo: parentView.heightAnchor,multiplier:0.5)

Answer 3

如果在弹出窗口中正确设置约束，弹出窗口的高度将取决于它的内容。

您需要做的（设置约束时）是确保弹出窗口的所有子视图的高度由其内容决定（对于从iOS免费获得的标签和按钮）。 UIScrollView不会根据它的内容改变它的大小，所以你必须给它一个高度约束。您还需要设置弹出窗口子视图之间的垂直距离。除此之外，你需要对弹出窗口的视图有限制，将其定位在它的超视图中，并且 NOT 要有约束控制它的高度。

这样，当标签和按钮的内容发生变化时，它们的高度会发生变化，弹出窗口的高度也会发生变化。

实现目标的另一种方法是覆盖弹出窗口的变量 intrinsicContentSize （假设您的弹出窗口是自定义视图）。

弹出视图的大小

3 个答案: