Блог

Я пытаюсь создать всплывающий div, похожий на iPad, в качестве упражнения, но я не могу понять, как центрировать всплывающий div по вертикали, имея неопределенную ширину / высоту содержимого.

http://jsfiddle.net/mbYyR/5/

Я хочу, чтобы треугольник указывал на позицию, определенную значениями #popover-wrapper top / bottom right / left, но top: -50% не работает.

Спасибо за вашу помощь 🙂

вы можете решить эту проблему с помощью jquery, пожалуйста, проверьте ссылку на скрипку

Если вы не хотите использовать javascript, то центрирование его по вертикали невозможно (как ранее заявляли другие). Однако, если ваша цель — просто создать красивое всплывающее окно с гибкой шириной / высотой, я рекомендую следующее чисто CSS-решение. После каждого раздела следует некоторое объяснение того, что я сделал и почему я это сделал.

ВАРИАНТ № 1 HTML (мой предпочтительный)

 <div id="popover-wrapper">
    <div id="popover-direction-setter">
        <div id="actual-popover-div">
            <div id="content-with-unknown-height">
                Content Content with unknown dimensions. Tip should point to the blue dot
                Content with unknown dimensions. Tip should point to the blue dot
                Content with unknown dimensions. Tip should point to the blue dot
            </div>   
        </div> 
    </div>
</div>
<div id="target-blue-dot"></div>
 

Треугольник div исчез, потому что я собираюсь использовать :after псевдокласс для его применения, поскольку он является чисто презентационным.

ВАРИАНТ № 1 CSS (обратите #triangle-tip внимание, что код был заменен на #popover-direction-setter:after )

 #popover-direction-setter {
    position: absolute;
    right: 20px; /* grow left */
    top:   0px;
    background: #EEE; /* for debugging */
    width: 160px; /*left position of wrapper - 40px for right position of this and triangle tip border size */
}

#actual-popover-div {
    position: absolute;
    right: 0px;
    top: -.5em;
    margin-top: -25px; /* border-radius   half the height of the triangle */
    padding: 0.5em;
    background: black;
    color: white;
    border-radius: 15px;
    min-height: 50px; /* 2 * border radius   half the height of the triangle */
}

#popover-direction-setter:after {
    content: '';
    position: absolute;
    width:  0;
    height: 0;
    top:           50%;
    margin-top:   -20px;
    border-top:    20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left:   20px solid black;
    right:        -20px;
}
 

Не пугайтесь #popover-direction-setter того width , что установлено. Я предполагаю, что вы знаете left позицию (поскольку вы ее используете), поэтому ее width можно предварительно рассчитать и установить максимальную ширину всплывающего окна, чтобы оно не стекало с левой стороны окна браузера. Я бы подумал, что это было бы хорошо.

Значение min-height установлено #actual-popover-div так, что если содержимое минимально, оно хорошо смотрится с треугольником.

top Позиция #actual-popover-div смещает ваши em размеры на padding . margin-top На этом элементе просто увеличивается достаточно, чтобы стрелка хорошо сидела в верхнем углу и была центрирована, когда min-height вступит в силу.

ВАРИАНТ № 2 HTML (сохраняет треугольник div , но перемещает его)

 <div id="popover-wrapper">
    <div id="popover-direction-setter">
        <div id="actual-popover-div">
            <div id="content-with-unknown-height">
                Content Content with unknown dimensions. Tip should point to the blue dot
                Content with unknown dimensions. Tip should point to the blue dot
                Content with unknown dimensions. Tip should point to the blue dot
            </div>   
        </div> 
        <div id="triangle-tip"></div>
    </div>
</div>
<div id="target-blue-dot"></div>
 

ВАРИАНТ № 2 CSS остается таким, каким у вас изначально был треугольник div , и устраняет мой :after код псевдокласса.

Я знаю, что это не полностью соответствует вашим требованиям к задаче. Опять же, я согласен с другими в том, что в настоящее время невозможно расположить элемент с центром по вертикали с неопределенной высотой. Однако, если ничего другого, другие могут счесть мое решение полезным для них.

Я почти уверен #actual-popover-div , что он не перемещается, потому что он установлен на position: relative . Установка его postion:absolute и изменение некоторых значений, похоже, дают желаемый эффект.

Пример: http://jsfiddle.net/mbYyR/8 /

Одна вещь, с которой нужно поиграть, — это установить верхнюю позицию, как у вас, а также установить отрицательное значение верхнего предела. Возможно, вы сможете добиться эффекта с помощью этого метода без использования jQuery.

Мое чистое решение HTML CSS (хотя нуждается в некоторой очистке):

http://tinkerbin.com/f2LIo7RM