Размер Popup View

Question

У меня есть всплывающее окно, в котором есть представление прокрутки и другие виды, такие как некоторые ярлыки, кнопки. Но высота всплывающего окна не увеличивается или не уменьшается автоматически в зависимости от его подпредставлений. Есть ли способ сделать это?

Answer 1

Вы можете создать пропорциональное ограничение по высоте с помощью superView следующим образом

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

Answer 2

Если вы правильно настроили свои ограничения во всплывающем окне, высота всплывающего окна будет определяться его содержимым.

Что вам нужно сделать (при настройке ограничений), чтобы убедиться, что высотадля всех подпредставлений всплывающих окон определяется их содержимое (для ярлыков и кнопок вы получаете его бесплатно с iOS).UIScrollView не меняет свой размер в зависимости от его содержимого, поэтому вы должны установить для него ограничение по высоте.Вы также должны иметь вертикальные расстояния между настройками подпредставлений всплывающего окна.Кроме того, у вас должны быть ограничения для представления всплывающего окна, расположение его в суперпредставлении и NOT , чтобы иметь ограничения, управляющие его высотой.

Таким образом, когда содержимое меток икнопки изменятся, их высота изменится, как и высота всплывающего окна.

Другой способ достижения вашей цели - переопределить переменную intrinsicContentSize вашего всплывающего окна (при условии, что ваше всплывающее окно являетсяпользовательский вид).

Answer 3

Не уверен, на каком языке или мотиве вы ссылаетесь, но если в постановлении о веб-разработке попробуйте это:

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"));
    });
});