Как стать автором
Поиск
Написать публикацию
Обновить

Комментарии 40

Чего только стоит избавиться от «гемороя» расчета координат для центровки. Здорово!
Всего голосов 6: ↑6 и ↓0+6
Самое интересное не разъяснили:
С такой задачей, конечно, без проблем справилась бы таблица или эмуляция таблицы с помощью display: table & display: table-cell, но заставить такое работать в старых IE — себе дороже. Таблица также отпадает — по понятным причинам.

Расскажите, пожалуйста, по каким понятным причинам отпадает таблица? Ведь проблем с ней нет ни в старых версиях браузера, ни в новых.

Далее. В каком доктайпе это работает? На странице JSFiddle стоит xhtml1-strict, хотя по настройкам слева — HTML5, а документ в фрейме. Означает ли это, что у документа в фрейме — тот же самый доктайп xhtml1-strict (он виден в Firebug, например)? А как вообще по-настоящему в HTML5 и кроссбраузерно — это везде работает? В котором проверяли?
Всего голосов 5: ↑3 и ↓2+1
Таблица — это не кошерно, что ли… Да и потом, завернуть всё в таблицу можно всегда, и это гарантированно будет работать — но ведь это скучно, гораздо интереснее заставить этот код работать во всех браузерах без использования таблиц, насколько это возможно.

В примере на jsFiddle доктайп html5. А о вопросе проверки разных доктайпов, честно говоря, не задумывался — для меня этот вопрос отпал больше года назад, с тех пор использую только doctype html. Можно вовсе отказаться от использования псевдоэлементов, добавив вместо этого один лишний элемент в разметку.
Всего голосов 3: ↑3 и ↓0+3
Это сайт так пишет, что HTML5, а Firebug определяет xhtml1-strict (v.1.90, Fx8.0 Lin) и исходный код страницы подтверждает. Посмотрите по Ctrl-U — «xhtml1-strict.dtd». В Опере то же самое. (Это к тому, что надо же знать, что мы верстаем. Я делал такое окно на таблице и тоже в xhtml1-strict.dtd. Особенно большие затраты занимает поддержка IE6(с деградацией)-7 с тенями и бордюрами. За другие способы не брался, потому что IE7 критичен, а что он там выкинет без таблиц — трудно предполагать, к тому же, с эффектами теней.)

Если будем брать HTML5 то будет иметь значение, какой фреймворк будем использовать для поддержки старых браузеров, а тут (у Вас) вроде нет никакого (и даже нового доктайпа нет). Попробуйте приложить фреймворк — где-то что-то поедет, и — работу начинать сначала. Результат, конечно, интересный, но по этой причине он ничего не доказывает — можно или нельзя делать попапы без таблиц во всех (хотя бы от IE7) браузерах.
Всего голосов 3: ↑0 и ↓3-3
НЛО прилетело и опубликовало эту надпись здесь
Спасибо, всегда удивляюсь Вашим глубоким знаниям :). (Без шуток.) Суть-то тут как раз в старых браузерах. Для IE9+Fx4+Chrome от где-то 10-12-го?, Оперы 11, Safari5 — всё это делается вообще очень легко на одном дыхании :). А вот необходимость второй вёрстки для старых браузеров вместо одной общей заставит отказаться от новаторства и делать по традиции :). (Правда, для меня это на настоящий момент осталось на уровне хобби, ну и хорошо, пусть они отмирают пока.)
Комментарий пока не оценивали0
НЛО прилетело и опубликовало эту надпись здесь
DOCTYPE html везде рендерится одинаково и предсказуемо. Потому, что по-большому счёту браузерам плевать на доктайп. Есть два режиме: quirks и standards. Только IE9 при старых доктайпах отрубает всякие фишки в CSS/JS, всем остальным — плевать. Вы можете юзать XHTML Strict и понавставлять фреймов тонну — и всё будет как и задумано.

Ставьте всегда DOCTYPE html и не мучайтесь.
Комментарий пока не оценивали0
НЛО прилетело и опубликовало эту надпись здесь
Almost же только в Firefox, не?
Комментарий пока не оценивали0
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Да, посмотрел, во фрейме, действительно <!DOCTYPE html>, спасибо. Тогда остаются остальные замечания выше, по поводу отсутствия СSS-фреймворка под HTML5. Т.е. интересно, но не очень практично; нельзя сделать однозначные выводы, будет ли работать при полноценном подходе где-то на сайте.
Всего голосов 1: ↑1 и ↓0+1
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
position: fixed?
display: inline-block?
content: ''?
:after?

Я уже боюсь открыть это в IE6 :)
Всего голосов 5: ↑1 и ↓4-3
goodbye же
Комментарий пока не оценивали0
Под IE 6 данным метод, пожалуй, не рассчитан. Точнее, заставить его работать в IE6 можно, только овчинка выделки не стоит.

В остальном — inline-block в IE 6-7 заставить работать можно, а использование псевдоэлемента :after — лишь в угоду лаконичности кода. Conditional comments и еще один лишний элемент — вот и вся хитрость.

Пожалуй, мне стоит добавить ссылку на пример, работающий в IE 7+. Сейчас сделаю.
Комментарий пока не оценивали0
Добавил пример для IE7+ в конце статьи.
Комментарий пока не оценивали0
Просто inline-block будет работать не во всех браузерах.
Могу предложить так:

display:-moz-inline-stack;
display:inline-block;
_overflow:hidden;
*zoom:1;
*display:inline;

Не помню где вычитал эту кучу хаков, но работает даже в ИЕ-6 ))
Всего голосов 1: ↑0 и ↓1-1
-moz-inline-stack это уже прошлый век, попробуй найди такого динозавра, который сидел бы на FF2. В остальном — да, можно только без overflow обойтись. Да, и zoom после *display: inline — сначала сделать инлайн, затем включить hasLayout.
Всего голосов 3: ↑3 и ↓0+3
Старый способ, не спорю.
overflow нужен для ИЕ6, без него помнится не работало )) Хотя уже давно под него ничего не верстал, не помню если честно.
Комментарий пока не оценивали0
Не, для ие6 overflow не нужен. Хватит вот этого:
.cls {
    display: inline-block;
    /display: inline;
    /zoom: 1;
}
Комментарий пока не оценивали0
Во-первых этот способ не абсолютно универсален. Добавляем очень много текста и все поплыло.
Для того, чтобы не поплыло, надо указать max-width попапа < width ширины окна или родителя.
Всего голосов 1: ↑1 и ↓0+1
Спасибо за замечание, действительно есть такое, как-то упустил этот момент из виду. Обновлю примеры, с учётом вашего замечания.
Комментарий пока не оценивали0
Кстате, если добавить к открытию модального окна: 
$('body').css('overflow','hidden');
а в закрытие соответственно overflow:auto, то избавимся от возможности скролить страницу, что очень важно для модальных окон. Удивлялся, почему про это забывают многие. Или здесь есть подводные камни?
Всего голосов 3: ↑3 и ↓0+3
Только если окно гарантированно маленькое. Не слишком приятно обнаружить, что кнопка отправки формы под сгибом.
Всего голосов 1: ↑1 и ↓0+1
НЛО прилетело и опубликовало эту надпись здесь
Для закрывающей кнопки лучше использовать & times;
Комментарий пока не оценивали0
Высоту и ширину в данном случае .popup мы знаем.
Не проще сделать так:

.popup {
position:absolute;
width:200px;
height:160px;
margin-left:-80px;
margin-top:-100px;
left:50%;
top:50%;
}
Комментарий пока не оценивали0
margin-left:-100px;*
margin-top:-80px;*
Фиксированно по центру получается.
Комментарий пока не оценивали0
Да то же самое получается :)
Комментарий пока не оценивали0
А теперь задача следующая:
Убираем лишний элемент для оверлея и делаем оверлей псевдоэлементом самого попапа (:before). Центрировать попап можно и через:
.popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}


Для IE < 9 можно высоту считать либо через expression либо джаваскрипт (на выбор). Также для IE < 8 нужен простенький фолбек скрипт для заворачивания в <div class="_ie_popup_overlay"></div> и стили соответствующие.
Всего голосов 5: ↑5 и ↓0+5
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Вот интересно, каких только фич не добавили в CSS3, когда же сделают нормальное выравнивание. А то для такой простой задачи как вывод блока по центру экрана, приходится кучу лишнего css писать…
Почему нельзя сделать, что-то типа 
align: center middle;
Всего голосов 2: ↑2 и ↓0+2
Кстати, советую посмотреть на мой вариант попапов только на CSS: kizu.ru/fun/popups/#SomePopup2 — правда, я там акцентировал внимание на том, чтобы показывать/скрывать попап используя только CSS, и на анимации появления/скрытия через транзишны, т.е. над центрированием по вертикали не заморачивался.

Но, может, заморочусь как-нибудь — иногда это бывает надо, да.
Всего голосов 2: ↑2 и ↓0+2
НЛО прилетело и опубликовало эту надпись здесь
Прошу прощения, а есть ли CSS-растягивание на весь экран не только по горизонтали, но и по вертикали.
Я имею ввиду вот что. Вот имеется к примеру 9 блоков:

1 2 3
4 5 6
7 8 9

Их может быть и 4 на 4 и хоть 10 на 5, тут не важно. Тут важно, чтобы например блоки 1 3 7 9 растекались по углам. Блок 2 сверху, блок 8 снизу, соответственно 4 слева и 6 справа, а 5 в центре.

Т.е. через CSS оно бы раскрывалось на весь экран и не важно какого он разрешения.

Ну или хотя бы просто 3 блока (123) (456) (789), чтобы 123 всегда был прижат к верху (ну это и так понятно), а вот чтобы 789 всегда был прижат к низу, а в центре был 456.

Хотя с девятью блоками тоже интересно.

Комментарий пока не оценивали0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Показать лучшие за всё время

Истории

Ваш аккаунт

Разделы

Информация

Услуги

Техническая поддержка
© 2006–2024, Habr