Добре дошли!

Добре дошли в нашите форуми, пълни с полезна информация. Имате проблем с компютъра или телефона си? Публикувайте нова тема и ще намерите решение на всичките си проблеми. Общувайте свободно и открийте безброй нови приятели.

Моля, регистрирайте се за да публикувате тема и да получите пълен достъп до всички функции.

Попъп с джаваскрипт

12 ноември 201114 г.

Здравейте,

Трябва ми попъп с джаваскрипт, който като се отвори да мога да слагам изображения в него..... не мога да го обясня точно ето скриин:

Ако може скриина да се показва когато страницата се зареди.

12 ноември 201114 г.

Заповядай! Лична изработка! Прави си шарениите с CSS!

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="pragma" content="no-cache" />
	<title>Test Page</title>
	
	<style type="text/css">
	html, body {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 1em;
		text-align: center;
		color: white;
		background-color: #8A2BE2;
		height: 100%;
		width: 100%;
	}
	div.darken {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		visibility: hidden;
	}
	
	div.darken div.popup_div
	{
		position: fixed;
		z-index: 100;
		top: 40%;
		left: 50%;
		z-index: 11;
		opacity: 0.0;
		visibility: hidden;
		margin-left: -200px;
		padding: 0;
		border: 1px solid white;
		background-color: orange;
		width: 400px;
		height: auto;
		text-align: left;
		overflow: hidden;
		color: black;
		box-shadow: 0 0 10px 5px #111;
	}
	p {
		margin: 1em;
		text-align: left;
	}
	a {
		color: white;
		text-decoration: none;
	}
	</style>
	<script type="text/javascript" > //<![CDATA[ <!--
	function set_opacity(id, opacity_) {
		document.getElementById(id).style.opacity = opacity_;
		document.getElementById(id).style.MozOpacity = opacity_;
		document.getElementById(id).style.KhtmlOpacity = opacity_;
		document.getElementById(id).style.filter = 'alpha(opacity=' + (opacity_ * 100) + ');';
		
	}
	function fade(id, startOpacity, stopOpacity, duration) {
		// The tracking of states per id bases disallows animations to be interrupted.
		if (fade.state == undefined) fade.state = new Array();
		if (fade.state[id] == undefined) fade.state[id] = 'idle';

		if (fade.state[id] == 'idle') {
			if (startOpacity < stopOpacity) { // fade in
				fade.state[id] = 'fade_in';
				set_opacity(id, 0.0);
				document.getElementById('darken'+id).style.visibility = "visible";
				document.getElementById(id).style.visibility = "visible";
				for (var i = startOpacity; i <= stopOpacity; i += 0.01) {
					setTimeout("set_opacity('" + id +"', " + i + ");", ( (i-startOpacity) / stopOpacity ) * duration);
				}
				setTimeout("fade.state['" + id + "'] = 'idle';", duration);
			
			} else { // fade out
				fade.state[id] = 'fade_out';
				for (var i = startOpacity; i >= stopOpacity; i -= 0.01) {
					setTimeout("set_opacity('" + id +"', " + i + ");", ( (startOpacity-i) / startOpacity ) * duration);
				}
				setTimeout("document.getElementById('" + id + "').style.visibility = 'hidden'; ", duration);
				setTimeout("document.getElementById('darken'+'" + id + "').style.visibility = 'hidden'; ", duration);
				setTimeout("fade.state['" + id + "'] = 'idle';", duration);
			}
		}
		// Vertical center element
		document.getElementById(id).style.marginTop = '-' + document.getElementById(id).scrollHeight/2 + 'px';
		return;
	}

	//--> //]]> </script>
</head>
<body>
	<br /><a href="javascript:fade('1', 0.0, 1.0, 250);">Open Popup with a link</a>
	<div class="darken" id="darken1">
	<div class="popup_div" id="1"><p>
		Open and close a popup DIV using a link, works just fine
		</p>
		<hr />
		<p style="text-align: right;"><a href="javascript:fade('1', 1.0, 0.0, 250);">Hide</a></p>
	</div></div>
	
	<br /><input type="button" onclick="javascript:fade('2', 0.0, 1.0, 250);" value="Open Popup using a button" />
	<div class="darken" id="darken2">
	<div class="popup_div" id="2"><p>
		Open and close a popup DIV using a button, works just fine as well.
		</p>
		<hr />
		<p style="text-align: right;"><input type="button" onclick="javascript:fade('2', 1.0, 0.0, 250);" value="Hide" /></p>
	</div></div>
	
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus malesuada ullamcorper porttitor. Nulla facilisi. Curabitur congue, purus nec mollis venenatis, enim eros cursus ante, et fermentum elit dui sollicitudin libero. Aenean tempus rhoncus quam, sit amet rutrum ligula mollis eget. Suspendisse aliquam molestie sem, nec consectetur risus posuere et. Nam commodo congue diam, ut molestie tortor blandit et. Nunc posuere, magna in tincidunt adipiscing, nibh felis aliquam massa, at consectetur lectus augue sit amet velit. Nullam eu urna nec velit dapibus malesuada eget laoreet nulla. Curabitur pellentesque convallis massa id luctus. Cras nunc elit, aliquet ac bibendum a, fermentum nec lorem. Pellentesque at massa ipsum.
	</p>
	<p>
		Suspendisse potenti. Aenean volutpat porttitor massa, eu aliquet nibh lobortis non. Ut velit neque, fringilla id commodo vel, accumsan et dolor. Sed placerat tristique placerat. Proin blandit, erat sed malesuada iaculis, eros lectus gravida metus, at ornare sapien urna id libero. Nullam pharetra quam at nisi rhoncus porttitor. Integer luctus nisl quis risus porttitor vitae placerat risus elementum. Curabitur sit amet mi nec sem hendrerit vestibulum. In malesuada dolor eget eros posuere quis bibendum felis dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero risus, tincidunt et sollicitudin quis, suscipit feugiat arcu.
	</p>
	<p>
		Vivamus tristique leo in neque convallis vel vestibulum odio eleifend. Maecenas elementum pharetra risus at tincidunt. Ut interdum sollicitudin tincidunt. Morbi eget nisi eu augue ornare sagittis. Nulla sollicitudin vestibulum sapien at euismod. Nullam a leo eget elit cursus semper a in lorem. Donec porta est nec nisl varius iaculis. Nullam vitae nunc nisi. Nullam justo lectus, dignissim eu sollicitudin vel, fringilla et augue. Donec ligula felis, consequat ut eleifend non, malesuada ac felis. Ut vestibulum, ipsum sit amet vehicula elementum, lectus quam sodales tortor, id varius neque magna non libero. Sed congue laoreet arcu et eleifend. Morbi consequat accumsan libero, varius egestas ipsum sollicitudin quis. Suspendisse fermentum rutrum metus ac ornare.
	</p>
	<p>
		Phasellus porttitor, eros ut consectetur interdum, turpis lorem adipiscing metus, quis dignissim est mi sit amet orci. Phasellus ultrices mattis justo, sit amet molestie ligula placerat non. Proin tempus aliquet neque, sit amet pharetra lorem blandit nec. Proin ullamcorper porttitor porttitor. Nam pretium, ipsum eget pretium semper, dolor enim volutpat lorem, ut molestie mauris odio nec purus. Morbi augue nisi, gravida eu gravida vel, facilisis nec est. Vivamus feugiat tincidunt justo, vitae accumsan metus convallis vel. Quisque imperdiet diam in sem laoreet tristique aliquam orci congue. Sed iaculis nibh ac elit ultricies ut fermentum lectus pellentesque. Vivamus suscipit, arcu vel aliquet accumsan, velit risus hendrerit dui, ut facilisis enim dolor sed sapien.
	</p>
	<p>
		Sed non augue enim. Proin elementum faucibus est in rhoncus. Pellentesque dolor lectus, dictum non tempus a, tempus eget diam. Nullam dapibus, libero eget ultrices posuere, nibh dui tristique velit, eget pellentesque elit neque a lorem. Nulla tristique dignissim mollis. Curabitur eu ligula purus. Duis a lacus vel ipsum tempus consectetur at et ipsum. Suspendisse potenti. Cras quis ligula vel tellus scelerisque aliquam. Praesent ullamcorper placerat felis, bibendum ornare odio scelerisque scelerisque. Morbi egestas viverra fringilla. Maecenas posuere lacinia lobortis. Quisque pellentesque erat eu velit vestibulum sit amet ultrices massa pulvinar. Nam rhoncus dolor ut nisi pretium imperdiet. Nunc a venenatis leo.
	</p>
</body>
</html>

Има и много готови решения в интернет с екзотични скриптове и библиотеки!

Редактирано 13 ноември 201114 г. от synner (преглед на промените)

12 ноември 201114 г.

....

jquery modal window търси. Море от готови предложения из просторите на нета.

15 ноември 201114 г.

Автор

synner благодарности!

Може да ставам нахален вече, но бих те помолил да обясниш как може да стане window.onload

Редактирано 16 ноември 201114 г. от Stanko2121 (преглед на промените)

21 ноември 201114 г.

Т.е. искаш, когато някой зареди страницата ти, да се отваря въпросният pop-up, да показва нещо (например реклама) и потребителят да го затваря??

26 ноември 201114 г.

За да изкача попъпът при зареждане на страницата, прасни някъде в скрипта:

window.onload = fade('2', 0.0, 1.0, 250);

Спрямо кода на synner.

Редактирано 26 ноември 201114 г. от deputamadre (преглед на промените)

Архивирана тема

Темата е твърде стара и е архивирана. Не можете да добавяте нови отговори в нея, но винаги можете да публикувате нова тема, в която да продължи дискусията. Регистрирайте се или влезте във вашия профил за да публикувате нова тема.

Няма регистрирани потребители разглеждащи тази страница.

Подкрепи съществуването на форума - направи дарение
32%

Дарени 315 € от нужните 1 000 €
- +21

Получавайте известие, когато има важна промяна или новина свързана с форума.

Абонирайте се

Добре дошли!

Попъп с джаваскрипт

Featured Replies

Архивирана тема

Разглеждащи това в момента 0

Дарение

Бюлетин

Профил

Навигация

Търсене

Конфигуриране на push известия в браузъра

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)