Всплывающее окно

DjTarik · October 28, 2009

Имеется вот такая штука:

Как ее грамотно заверстать?

На ум приходит только либо таблца 3х3, или же дивами (там из тоже будет много). Расскажите, кто как делает подобные вещи?

P.S. Также нужно отметить, что окно должно тянуться как по горизонтали, так и во вертикали. Тень и углы - естественно полупрозрачные.

Спасибо за любую инфу...

psywalker · October 28, 2009

Имеется вот такая штука:
Как ее грамотно заверстать?
На ум приходит только либо таблца 3х3, или же дивами (там из тоже будет много). Расскажите, кто как делает подобные вещи?
P.S. Также нужно отметить, что окно должно тянуться как по горизонтали, так и во вертикали. Тень и углы - естественно полупрозрачные.
Спасибо за любую инфу...

Короче подготовь мне 8 картинок-квадратиков, а точнее Всех углов и Границ - правых, верхних, нижних и левых границ, что-бы они хорошо состыковывались и относились к друг другу, я тебе покажу вариант

DjTarik · October 28, 2009

Ты мне на словах расскажи - я пойму) Я уже переверстал их немерено - а вот как лучше - так и не понял...

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

p.S. Интересует сама структура кода, кол-во элементов... Можно и без картинок)))

psywalker · October 28, 2009

	<div class="box">
		<div class="top"><div><div></div></div></div>
		<div class="mdl"><div><div>
			  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>


		</div></div></div>
		<div class="btm"><div><div></div></div></div>
	</div>

Edited October 28, 2009 by psywalker

DjTarik · October 28, 2009

У меня сейчас такой вариант:

<div class="popup-wrapper">
			<div class="popup-header">
				<div class="popup-ltc"><!-- // --></div>
				<div class="popup-rtc"><!-- // --></div>
			</div>
			<div class="popup-center">
				<div class="popup-lcc">
					<div class="popup-rcc">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nulla nec diam suscipit sagittis. Phasellus iaculis euismod orci, sit amet mollis risus scelerisque eget. Vestibulum volutpat sem nec sapien pharetra tristique. Vestibulum augue quam, semper eget fringilla et, commodo vitae eros. Duis tincidunt quam sit amet massa scelerisque elementum. Proin arcu ipsum, gravida pharetra blandit vulputate, tincidunt sit amet est. Vestibulum placerat lacinia ultricies. Mauris non diam magna, a congue nisl. Pellentesque sit amet augue sem, in vulputate felis. Nulla blandit dignissim bibendum. Cras semper sodales velit, ac consequat urna ornare id. Praesent diam massa, sagittis at posuere id, malesuada in arcu. In hendrerit faucibus tempus. Vestibulum ut turpis nisl. Morbi ac mi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat.</p>
					</div>
				</div>				
			</div>
			<div class="popup-footer">
				<div class="popup-lbc"><!-- // --></div>
				<div class="popup-rbc"><!-- // --></div>
			</div>		
		</div>

Расскажи, почему ты используешь вложенные дивы?

psywalker · October 28, 2009

У меня сейчас такой вариант:

<div class="popup-wrapper">
			<div class="popup-header">
				<div class="popup-ltc"><!-- // --></div>
				<div class="popup-rtc"><!-- // --></div>
			</div>
			<div class="popup-center">
				<div class="popup-lcc">
					<div class="popup-rcc">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nulla nec diam suscipit sagittis. Phasellus iaculis euismod orci, sit amet mollis risus scelerisque eget. Vestibulum volutpat sem nec sapien pharetra tristique. Vestibulum augue quam, semper eget fringilla et, commodo vitae eros. Duis tincidunt quam sit amet massa scelerisque elementum. Proin arcu ipsum, gravida pharetra blandit vulputate, tincidunt sit amet est. Vestibulum placerat lacinia ultricies. Mauris non diam magna, a congue nisl. Pellentesque sit amet augue sem, in vulputate felis. Nulla blandit dignissim bibendum. Cras semper sodales velit, ac consequat urna ornare id. Praesent diam massa, sagittis at posuere id, malesuada in arcu. In hendrerit faucibus tempus. Vestibulum ut turpis nisl. Morbi ac mi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat.</p>
					</div>
				</div>				
			</div>
			<div class="popup-footer">
				<div class="popup-lbc"><!-- // --></div>
				<div class="popup-rbc"><!-- // --></div>
			</div>		
		</div>

Расскажи, почему ты используешь вложенные дивы?

Вот так вот и делай, пральна делаешь, потом покажешь реализацию

DjTarik · October 28, 2009

Мне не нравиться то, что у меня много буков получается)) Одни классы чего стоят... По идее - если запихнуть все в дивы и сделать их вложенными - можно сэкономить? =) Или это особо ситуацию не изменит?

psywalker · October 28, 2009

Мне не нравиться то, что у меня много буков получается)) Одни классы чего стоят... По идее - если запихнуть все в дивы и сделать их вложенными - можно сэкономить? =) Или это особо ситуацию не изменит?

А что ты хотел, у тебя сложная реализация, тут ничего не попишешь, я перевидал много способов, но все они явно уступают этому в чём то, даже если и содержат меньше элементов. Если ты хочешь построить неубиваемую конструкцию, что-бы при этом она растягивалась бесконечно во все стороны, то считаю этот вариант будет хорош

DjTarik · October 28, 2009

А что ты хотел, у тебя сложная реализация, тут ничего не попишешь, я перевидал много способов, но все они явно уступают этому в чём то, даже если и содержат меньше элементов. Если ты хочешь построить неубиваемую конструкцию, что-бы при этом она растягивалась бесконечно во все стороны, то считаю этот вариант будет хорош

А может все таки табличкой или списками?

psywalker · October 28, 2009

А может все таки табличкой или списками?

Насчёт таблиц я против, а вот со списком тоже идея мне не особо нравится, а как вообще такое реализуется на списках?

DjTarik · October 28, 2009

Насчёт таблиц я против, а вот со списком тоже идея мне не особо нравится, а как вообще такое реализуется на списках?

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

Список - 3 элемента + еще 4 элемента отпозиционируем по краям. Вроде все...

Раньше делал - но тож мне почему-то не понравилось...)

psywalker · October 28, 2009

Да как и дивами... Ток по идее центральная часть будет проблемной (но если мы знаем ширину - все просто).
Список - 3 элемента + еще 4 элемента отпозиционируем по краям. Вроде все...
Раньше делал - но тож мне почему-то не понравилось...)

короче не парься и делай на дивах, только потом не забудь в личку кинуть реализацию посмотреть

DjTarik · October 28, 2009

короче не парься и делай на дивах, только потом не забудь в личку кинуть реализацию посмотреть

Если подскажешь хостинг какой (хочу бложек себе) - я бы закинул туда. А так мне некуда..(((

P.S. Есть еще вопос...)

DjTarik · October 28, 2009

А вопрос вот в чем)

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

Сами вопросы:

1. Возможно ли затемнить всю область (по всей высоте сайта, поверх него) без использования скриптов?

2. Можно ли отцентрировать див как по горизонтали, так и по вертикали, не зная его размеров (т.е. все зависит от уол-ва текста в нем)?

psywalker · October 28, 2009

А вопрос вот в чем)
Заверстал я то, что сверху, но чтобы popup был как-то отделен от сайта, стоит такая задача - затемнить всю видимую область (полупрозрачный черный цвет) и отцентрировать наш popup по центру (как по горизонтали - так и по вертикали).
Сами вопросы:
1. Возможно ли затемнить всю область (по всей высоте сайта, поверх него) без использования скриптов?
2. Можно ли отцентрировать див как по горизонтали, так и по вертикали, не зная его размеров (т.е. все зависит от уол-ва текста в нем)?

Насчёт хостинга не знаю, посмотри их много в инете, я например пользуюсь http://www.hc.ru/ru/ уже давно и не обламываюсь

1) Я не понял чё ты хочешь, приведи скрин

2) Я так делать не умею, может кто из мастеров подскажет

DjTarik · October 28, 2009

1. Вот, к примеру, есть сайт - на нем до фига текста - следовательно появляется полоса прокрутки. Так вот если наложить абсолютно отпозиционированный див поверх всего - то его нужно растянуть на всю высоту сайта (и на ту часть, что прокручивается, т.е. находится за экраном снизу). При width: 100%; height: 100%; - див растягивается на ширину и высоту экрана - а при прокрутке - остается не затемненная часть. Так вот как затемнить все область? Можно ли без скриптов?

2. Что же придумать?)

psywalker · October 29, 2009

1. Вот, к примеру, есть сайт - на нем до фига текста - следовательно появляется полоса прокрутки. Так вот если наложить абсолютно отпозиционированный див поверх всего - то его нужно растянуть на всю высоту сайта (и на ту часть, что прокручивается, т.е. находится за экраном снизу). При width: 100%; height: 100%; - див растягивается на ширину и высоту экрана - а при прокрутке - остается не затемненная часть. Так вот как затемнить все область? Можно ли без скриптов?
2. Что же придумать?)

1) Вот тебе пример: Заполняй текстом, и увидишь что див будет тянуться до конца вниз:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Block</title>
<style type="text/css">
*{ margin: 0; padding: 0;}

html, body { height: 100%;}

	div.wrap { 
		min-height: 100%;
		position: relative;
	}
		div.wrap div {
			position: absolute;
			top: 0;
			bottom: 0;
			width: 200px;
			background: red;
		}

</style>
</head>

<body>
	<div class="wrap">
		<div></div>
	</div>
</body>
</html>

2) может мастера смогут подсказать

DjTarik · October 29, 2009

1. Спасибо, попробую, но мне кажется, что если сам сайт (div class="wrapper") будет 1000px по ширине - то как тогда перекрыть все область сайта (по ширине body)? При разршении в 1440, к примеру? Вроде как не получится...

2. Надо ждать, ибо я уже не знаю, что делать... А эта задача очень распространенная... Таблицей, что ли... (

DjTarik · November 4, 2009

Блин, хоть убей - не получается...

Вот код:

HTML

<div class="popup-wrapper">
			<div class="popup-header">
				<div><div><!-- // --></div></div>
			</div>
			<div class="popup-center-sh-l">
				<div class="popup-center-sh-r">
					<div class="popup-center">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nulla nec diam suscipit sagittis. Phasellus iaculis euismod orci, sit amet mollis risus scelerisque eget. Vestibulum volutpat sem nec sapien pharetra tristique. Vestibulum augue quam, semper eget fringilla et, commodo vitae eros. Duis tincidunt quam sit amet massa scelerisque elementum. Proin arcu ipsum, gravida pharetra blandit vulputate, tincidunt sit amet est. Vestibulum placerat lacinia ultricies. Mauris non diam magna, a congue nisl. Pellentesque sit amet augue sem, in vulputate felis. Nulla blandit dignissim bibendum. Cras semper sodales velit, ac consequat urna ornare id. Praesent diam massa, sagittis at posuere id, malesuada in arcu. In hendrerit faucibus tempus. Vestibulum ut turpis nisl. Morbi ac mi tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat.</p>
						<p>Sed faucibus interdum convallis. Praesent feugiat dui ac metus hendrerit vitae interdum libero feugiat. Nullam eleifend luctus lectus eget viverra. Donec tincidunt purus ut nibh pellentesque ut imperdiet ipsum tempor. Nam at nibh mauris. Sed in lectus nibh, eu rhoncus purus. Praesent imperdiet iaculis lorem ut facilisis. Vivamus eget massa vitae mi imperdiet imperdiet et a ligula. Nullam bibendum cursus odio et venenatis. Nam egestas, velit quis semper suscipit, ipsum odio mollis justo, sit amet interdum sem sapien vitae diam. Aenean in quam eget dui tempus molestie.</p>
						<p>Suspendisse euismod risus imperdiet mauris viverra dignissim. Maecenas vel augue eu odio vulputate consequat et sed est. Vestibulum bibendum hendrerit magna sit amet dapibus. Proin varius porttitor lobortis. Vestibulum eget ligula libero. Aliquam molestie gravida metus. Suspendisse molestie tempor mauris, in varius purus bibendum id. Fusce nec lacus ac nunc mattis sodales. Suspendisse potenti. Curabitur aliquet ultricies lorem, nec vestibulum est porta convallis. Vestibulum justo felis, sodales et condimentum sed, laoreet sed justo. Donec ac vestibulum turpis. Morbi molestie sem id felis dapibus volutpat. Mauris malesuada, elit at euismod facilisis, diam sapien lacinia quam, quis accumsan mauris diam a nisl. Aenean ut justo eu sapien luctus sagittis.</p>
					</div>
				</div>
			</div>
			<div class="popup-footer">
				<div><div><!-- // --></div></div>
			</div>
		</div>

CSS

	.popup-wrapper {
		min-width: 500px;
		margin: 50px 100px;
	}

		/* — !!! — */
		.popup-header, .popup-footer {
			height: 40px;
		}
		.popup-header div, .popup-footer div {
			height: 100%;
		}
		/* — !!! — */
		.popup-header, .popup-header div,
		.popup-footer, .popup-footer div {
			background: url(img/index_01/popup_corners.png) no-repeat;
		}
		.popup-header {
			background-position: left 0px;
		}
		.popup-header div {
			background-position: right -40px;
		}
		.popup-footer {
			background-position: left -80px;
		}
		.popup-footer div {
			background-position: right -120px;
		}
		/* — !!! — */
		.popup-header div div, .popup-footer div div, .popup-center {
			margin: 0px 40px;
		}
		.popup-header div div {
			background: url(img/index_01/popup_sh_t.png);
		}
		.popup-footer div div {
			background: url(img/index_01/popup_sh_b.png);
		}
		/* — !!! — */
		.popup-center-sh-l {
			background: url(img/index_01/popup_sh_l.png) repeat-y;
		}
		.popup-center-sh-r {
			background: url(img/index_01/popup_sh_r.png) repeat-y right;
		}
		/* — !!! — */
		.popup-center {
			background: #fff;
			overflow: hidden;
			_zoom: 1;
		}

Все тянется во все стороны, все классно, но проблемы с картинками. Я не могу сделать также с png24 для ie6. Нельзя отпозиционировать - вот в этом вся сложность. Может я чего-то упускаю, но как сделать правый фон на все длину контента? уголки я могу отпозиционировать, к примеру - а как быть с центром?

Натолкните на мысль... (заранее вырезал прозрачную пнг-шку на 2000 пикселей... - хочу через альфаканал)

P.S. Или тут только таблицы? O_o

Edited November 4, 2009 by DjTarik

psywalker · November 5, 2009

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

DjTarik · November 5, 2009

Так мне главное логику понять... С кодом я разберусь...

Возможно ли так сделать вообще...

что бы все тянулось во все стороны и было полупрозрачным. IE 6 интересует...

psywalker · November 5, 2009

Так мне главное логику понять... С кодом я разберусь...
Возможно ли так сделать вообще...
что бы все тянулось во все стороны и было полупрозрачным. IE 6 интересует...

Картинку залить слабо?

DjTarik · November 5, 2009

ща закачаю куда-нить...

DjTarik · November 5, 2009

как пример

http://tarik.kasperovich.ru/test/index_01.html

там все ok? кроме полупрозрачности. В принципе, картинки я могу не растягивать, а сделать с запасом. и правые отпозиционировать. Но как быть тогда с центром?

Edited November 5, 2009 by DjTarik

psywalker · November 5, 2009

ты можешь мне залить отдельную картинку, тень? просто НЕпорезанную

DjTarik · November 5, 2009

так?

http://tarik.kasperovich.ru/test/img/index_01/popup.png

Sign In

Всплывающее окно

Question

Link to comment

Share on other sites

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

66 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information