Элемент поверх другого элемента - JavaScript, Ajax

Krasi · 28.07.2010, 01:21

На многих сайтах есть такая штука: загрузилась страница, нажимаешь, например, "войти", а вместо нового окна или перехода на новую страницу поверх всей страницы появляется по-своему оформленная форма для входа, задний план затемняется. Как это делается с самого начала?

SkyM@n · 28.07.2010, 01:37

jquery overlay

Krasi · 28.07.2010, 19:31

Пока все понятно.
Уже не все. У меня есть tpl файл. Пишу только в нем.
1. Я вставил в верх строчку: <script src="http://cdn.jquerytools.org/1.2.3/form/jquery.tools.min.js"></script>;
2. Делаю пример со страницы http://flowplayer.org/tools/demos/overlay/index.html:
2.1. Скопировал весь css;
2.2. Добавил на верх:

Код:

{literal}
<script type='text/javascript'>
<!--
  $("img[rel]").overlay();
// -->
</script>
{/literal}

2.3. В середине написал:

Код HTML:

<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" rel="#mies1"/>
  <!-- first overlay. id attribute matches our selector -->
<div class="simple_overlay" id="mies1">

	<!-- large image -->
	<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" />

	<!-- image details -->
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>The content ...</p>
	</div>

</div>

<!-- second overlay -->
<div class="simple_overlay" id="mies2">
	...
</div>

Картинка отобразилась, ссылки с нее не видно, нового окна не открывается при клике. CSS фон и тп это потом, больше ничего не делал, может еще что-то надо?

Krasi · 30.07.2010, 18:37

Может это что-нибудь разъяснит: создаю html файл и пишу там только:

Код:

<html><head>

<script src="http://cdn.jquerytools.org/1.2.3/full/jquery.tools.min.js"></script>
<SCRIPT LANGUAGE="JavaScript"> <!--  $("img[rel]").overlay(); // --> </SCRIPT>

<style type="text/css">
.simple_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#333;
	
	width:675px;	
	min-height:200px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}
.details {
		position:absolute;
		top:15px;
		right:15px;
		font-size:11px;
		color:#fff;
		width:150px;
	}
	
	.details h3 {
		color:#aba;
		font-size:15px;
		margin:0 0 -10px 0;
	}
</style>
</head>

<body>

<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" rel="#mies1"/>
<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" rel="#mies2"/>
<!-- first overlay. id attribute matches our selector -->
<div class="simple_overlay" id="mies1">

	<!-- large image -->
	<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" />

	<!-- image details -->
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>The content ...</p>
	</div>

</div>

<!-- second overlay -->
<div class="simple_overlay" id="mies2">
	<!-- large image -->
	<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" />

	<!-- image details -->
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>The content ...</p>
	</div>
</div>

</body></html>

Код не работает. Цсс сделало details скрытыми, но ничего не происходит при нажатии на картинку.

Krasi · 30.07.2010, 18:48

А все, там есть пример на http://flowplayer.org/tools/demos/overlay/index.htm
А как сделать вызов всплывающего элемента текстом, а не картинкой?

Krasi · 31.07.2010, 19:16

Еще одна проблема.

Код:

<table border="0" width="100%" id="text">
{section name=up_loop loop=$up}
<tr><td valign="top" align="right"><div id="onhref"><a href="./news.php?news={$up[up_loop].news_id}" class="link1">{$up

[up_loop].news_title}</div></a>
{$up[up_loop].news_short}</td>
<td width="100px"><img src="./img/news/{$up[up_loop].news_photo}" width="100px" rel="#mies1"/><div class="simple_overlay" 

id="mies1"><img src="./img/news/{$up[up_loop].news_photo}" width="100%"/></div></td></tr>
{/section}
</table>

Тут я хочу вывести фотку в новом окне, но loop не работает. В любом случае выводит только первую фотку. В чем проблема? Вообще для страницы без нового окна loop сработал.

28.07.2010, 01:21	#1
Krasi Форумчанин Регистрация: 12.02.2010 Сообщений: 787	Элемент поверх другого элемента На многих сайтах есть такая штука: загрузилась страница, нажимаешь, например, "войти", а вместо нового окна или перехода на новую страницу поверх всей страницы появляется по-своему оформленная форма для входа, задний план затемняется. Как это делается с самого начала? Мой сайт

30.07.2010, 18:48	#5
Krasi Форумчанин Регистрация: 12.02.2010 Сообщений: 787	А все, там есть пример на http://flowplayer.org/tools/demos/overlay/index.htm А как сделать вызов всплывающего элемента текстом, а не картинкой? Мой сайт Последний раз редактировалось Krasi; 30.07.2010 в 19:15.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
добавить элемент после элемента с указанным номером	SOUR47	Помощь студентам	0	20.05.2010 21:09
можно ли прописать стиль для элемента "внутри" этого самого элемента ?	vedro-compota	HTML и CSS	8	03.05.2010 17:24
Си -Расположить элементы в порядке возрастания от первого нулевого элемента до отрицательного элемента	Freia	Помощь студентам	17	13.12.2009 15:41
Первый нечетный элемент каждой строки удвоить (предполагается, что в каждой строке есть нечетный элемент	Галина002	Помощь студентам	1	18.03.2009 06:30
заменить любой минимальный элемент максимальным и сменить знак максимального элемента противоположным	Рітка-кулеметчиця	Паскаль, Turbo Pascal, PascalABC.NET	2	26.01.2009 17:45

28.07.2010, 01:37	#2
SkyM@n Laravel/Vue expert Старожил Подтвердите свой е-майл Регистрация: 08.08.2007 Сообщений: 2,832	jquery overlay

28.07.2010, 19:31	#3
Krasi Форумчанин Регистрация: 12.02.2010 Сообщений: 787	Пока все понятно. Уже не все. У меня есть tpl файл. Пишу только в нем. 1. Я вставил в верх строчку: <script src="http://cdn.jquerytools.org/1.2.3/form/jquery.tools.min.js"></script>; 2. Делаю пример со страницы http://flowplayer.org/tools/demos/overlay/index.html: 2.1. Скопировал весь css; 2.2. Добавил на верх: Код: `{literal} <script type='text/javascript'> <!-- $("img[rel]").overlay(); // --> </script> {/literal}` 2.3. В середине написал: Код HTML: <img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" rel="#mies1"/> <!-- first overlay. id attribute matches our selector --> <div class="simple_overlay" id="mies1"> <!-- large image --> <img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" /> <!-- image details --> <div class="details"> <h3>The Barcelona Pavilion</h3> <h4>Barcelona, Spain</h4> <p>The content ...</p> </div> </div> <!-- second overlay --> <div class="simple_overlay" id="mies2"> ... </div> Картинка отобразилась, ссылки с нее не видно, нового окна не открывается при клике. CSS фон и тп это потом, больше ничего не делал, может еще что-то надо? Мой сайт Последний раз редактировалось Krasi; 28.07.2010 в 20:08.