Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 40
Чего только стоит избавиться от «гемороя» расчета координат для центровки. Здорово!
Самое интересное не разъяснили:
Расскажите, пожалуйста, по каким понятным причинам отпадает таблица? Ведь проблем с ней нет ни в старых версиях браузера, ни в новых.
Далее. В каком доктайпе это работает? На странице JSFiddle стоит xhtml1-strict, хотя по настройкам слева — HTML5, а документ в фрейме. Означает ли это, что у документа в фрейме — тот же самый доктайп xhtml1-strict (он виден в Firebug, например)? А как вообще по-настоящему в HTML5 и кроссбраузерно — это везде работает? В котором проверяли?
С такой задачей, конечно, без проблем справилась бы таблица или эмуляция таблицы с помощью display: table & display: table-cell, но заставить такое работать в старых IE — себе дороже. Таблица также отпадает — по понятным причинам.
Расскажите, пожалуйста, по каким понятным причинам отпадает таблица? Ведь проблем с ней нет ни в старых версиях браузера, ни в новых.
Далее. В каком доктайпе это работает? На странице JSFiddle стоит xhtml1-strict, хотя по настройкам слева — HTML5, а документ в фрейме. Означает ли это, что у документа в фрейме — тот же самый доктайп xhtml1-strict (он виден в Firebug, например)? А как вообще по-настоящему в HTML5 и кроссбраузерно — это везде работает? В котором проверяли?
Таблица — это не кошерно, что ли… Да и потом, завернуть всё в таблицу можно всегда, и это гарантированно будет работать — но ведь это скучно, гораздо интереснее заставить этот код работать во всех браузерах без использования таблиц, насколько это возможно.
В примере на jsFiddle доктайп html5. А о вопросе проверки разных доктайпов, честно говоря, не задумывался — для меня этот вопрос отпал больше года назад, с тех пор использую только doctype html. Можно вовсе отказаться от использования псевдоэлементов, добавив вместо этого один лишний элемент в разметку.
В примере на jsFiddle доктайп html5. А о вопросе проверки разных доктайпов, честно говоря, не задумывался — для меня этот вопрос отпал больше года назад, с тех пор использую только doctype html. Можно вовсе отказаться от использования псевдоэлементов, добавив вместо этого один лишний элемент в разметку.
Это сайт так пишет, что HTML5, а Firebug определяет xhtml1-strict (v.1.90, Fx8.0 Lin) и исходный код страницы подтверждает. Посмотрите по Ctrl-U — «xhtml1-strict.dtd». В Опере то же самое. (Это к тому, что надо же знать, что мы верстаем. Я делал такое окно на таблице и тоже в xhtml1-strict.dtd. Особенно большие затраты занимает поддержка IE6(с деградацией)-7 с тенями и бордюрами. За другие способы не брался, потому что IE7 критичен, а что он там выкинет без таблиц — трудно предполагать, к тому же, с эффектами теней.)
Если будем брать HTML5 то будет иметь значение, какой фреймворк будем использовать для поддержки старых браузеров, а тут (у Вас) вроде нет никакого (и даже нового доктайпа нет). Попробуйте приложить фреймворк — где-то что-то поедет, и — работу начинать сначала. Результат, конечно, интересный, но по этой причине он ничего не доказывает — можно или нельзя делать попапы без таблиц во всех (хотя бы от IE7) браузерах.
Если будем брать HTML5 то будет иметь значение, какой фреймворк будем использовать для поддержки старых браузеров, а тут (у Вас) вроде нет никакого (и даже нового доктайпа нет). Попробуйте приложить фреймворк — где-то что-то поедет, и — работу начинать сначала. Результат, конечно, интересный, но по этой причине он ничего не доказывает — можно или нельзя делать попапы без таблиц во всех (хотя бы от IE7) браузерах.
Спасибо, всегда удивляюсь Вашим глубоким знаниям :). (Без шуток.) Суть-то тут как раз в старых браузерах. Для IE9+Fx4+Chrome от где-то 10-12-го?, Оперы 11, Safari5 — всё это делается вообще очень легко на одном дыхании :). А вот необходимость второй вёрстки для старых браузеров вместо одной общей заставит отказаться от новаторства и делать по традиции :). (Правда, для меня это на настоящий момент осталось на уровне хобби, ну и хорошо, пусть они отмирают пока.)
DOCTYPE html везде рендерится одинаково и предсказуемо. Потому, что по-большому счёту браузерам плевать на доктайп. Есть два режиме: quirks и standards. Только IE9 при старых доктайпах отрубает всякие фишки в CSS/JS, всем остальным — плевать. Вы можете юзать XHTML Strict и понавставлять фреймов тонну — и всё будет как и задумано.
Ставьте всегда DOCTYPE html и не мучайтесь.
Ставьте всегда DOCTYPE html и не мучайтесь.
position: fixed?
display: inline-block?
content: ''?
:after?
Я уже боюсь открыть это в IE6 :)
display: inline-block?
content: ''?
:after?
Я уже боюсь открыть это в IE6 :)
Say goodbie IE6 :) www.ie6countdown.com
Под IE 6 данным метод, пожалуй, не рассчитан. Точнее, заставить его работать в IE6 можно, только овчинка выделки не стоит.
В остальном — inline-block в IE 6-7 заставить работать можно, а использование псевдоэлемента :after — лишь в угоду лаконичности кода. Conditional comments и еще один лишний элемент — вот и вся хитрость.
Пожалуй, мне стоит добавить ссылку на пример, работающий в IE 7+. Сейчас сделаю.
В остальном — inline-block в IE 6-7 заставить работать можно, а использование псевдоэлемента :after — лишь в угоду лаконичности кода. Conditional comments и еще один лишний элемент — вот и вся хитрость.
Пожалуй, мне стоит добавить ссылку на пример, работающий в IE 7+. Сейчас сделаю.
Просто inline-block будет работать не во всех браузерах.
Могу предложить так:
Не помню где вычитал эту кучу хаков, но работает даже в ИЕ-6 ))
Могу предложить так:
display:-moz-inline-stack;
display:inline-block;
_overflow:hidden;
*zoom:1;
*display:inline;
Не помню где вычитал эту кучу хаков, но работает даже в ИЕ-6 ))
Кстате, если добавить к открытию модального окна:
$('body').css('overflow','hidden');
Для закрывающей кнопки лучше использовать & times;
Высоту и ширину в данном случае .popup мы знаем.
Не проще сделать так:
Не проще сделать так:
.popup {
position:absolute;
width:200px;
height:160px;
margin-left:-80px;
margin-top:-100px;
left:50%;
top:50%;
}
А теперь задача следующая:
Убираем лишний элемент для оверлея и делаем оверлей псевдоэлементом самого попапа (:before). Центрировать попап можно и через:
Для IE < 9 можно высоту считать либо через expression либо джаваскрипт (на выбор). Также для IE < 8 нужен простенький фолбек скрипт для заворачивания в <div class="_ie_popup_overlay"></div> и стили соответствующие.
Убираем лишний элемент для оверлея и делаем оверлей псевдоэлементом самого попапа (: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> и стили соответствующие.
Вот интересно, каких только фич не добавили в CSS3, когда же сделают нормальное выравнивание. А то для такой простой задачи как вывод блока по центру экрана, приходится кучу лишнего css писать…
Почему нельзя сделать, что-то типа
Почему нельзя сделать, что-то типа
align: center middle;
Кстати, советую посмотреть на мой вариант попапов только на CSS: kizu.ru/fun/popups/#SomePopup2 — правда, я там акцентировал внимание на том, чтобы показывать/скрывать попап используя только CSS, и на анимации появления/скрытия через транзишны, т.е. над центрированием по вертикали не заморачивался.
Но, может, заморочусь как-нибудь — иногда это бывает надо, да.
Но, может, заморочусь как-нибудь — иногда это бывает надо, да.
Прошу прощения, а есть ли 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.
Хотя с девятью блоками тоже интересно.
Я имею ввиду вот что. Вот имеется к примеру 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.
Хотя с девятью блоками тоже интересно.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Модальные окна на CSS