ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Появление блока div при нажатии на ссылку
5 сообщений из 5, страница 1 из 1
Появление блока div при нажатии на ссылку
    #39241511
Askm
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Askm
Гость
Я не пойму, как сделать чтобы при нажатии на ссылку появился блок div небольшого размера. Закрыть этот блок можно только щелкнув на крестик в правом верхнем углу. Вот схемы того как все должно происходить:
...
Рейтинг: 0 / 0
23.05.2016, 16:04
| Ответить | Цитировать | Написать  
Появление блока div при нажатии на ссылку
    #39241513
Askm
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Askm
Гость
Askm,
...
Рейтинг: 0 / 0
23.05.2016, 16:04
| Ответить | Цитировать | Написать  
Появление блока div при нажатии на ссылку
    #39241523
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
AskmЯ не пойму, как сделать чтобы при нажатии на ссылку появился блок div небольшого размера. Закрыть этот блок можно только щелкнув на крестик в правом верхнем углу.
Для начала просто сделай страницу с видимым ДИВом... Потом добейся того, чтобы он исчезал по нажатию на крестик...
А потом все просто!
Укажи тому диву
Код: css
1.
display: none;


Потом при нажатии на ссылку установи ему
Код: css
1.
display: block;


Вот собственно и все...
...
Рейтинг: 0 / 0
23.05.2016, 16:12
| Ответить | Цитировать | Написать  
Появление блока div при нажатии на ссылку
    #39241550
Павел Гужанов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Павел Гужанов
Участник
Недавно на этом же форуме было, я совсем чуть-чуть переделал:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
<!DOCTYPE HTML>
<html><head>
<title>DIVное окно!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<style type="text/css">
	#divWin {
		position:absolute; 
		width:300px; 
		height:200px; 
		border:3px solid green; 
		background:white; 
		visibility:hidden; 
		padding:20px; 
		text-align:center;
	}
	#divWin div div{
		float: left;
	}
	#closetButton {
		position:absolute; 
		top:0; 
		right:0; 
		border-bottom:3px solid green; 
		border-left:3px solid green; 
		font-weight:bold; 
		cursor:pointer; 
		padding:2px 4px
	}
	p{
		cursor:pointer;
	}
</style>
<script type="text/javascript">
	function winOpen(){
		var obj=document.getElementById("divWin").style;
		obj.visibility="visible";
		winOpen2(3, 0, obj);
	};
	 
	function winOpen2(s, o, obj){//показываем окно
		o+=s;
		if(o<100){
			obj.opacity=o/100;
			obj.filter='alpha(opacity='+o+')';
			setTimeout(function(){
					winOpen2(s, o, obj);
				}, 55);
			}
		else{//показать полностью
			obj.opacity=1;
			obj.filter='alpha(opacity=100)';
		};
	};
	 
	function winCloset(){
		winCloset2(5, 100, document.getElementById("divWin").style);
	};
	 
	function winCloset2(s, o, obj){//скрываем окно
		o-=s;
		if(o>0){
			obj.opacity=o/100;
			obj.filter='alpha(opacity='+o+')';
			setTimeout(function(){
					winCloset2(s, o, obj);
				}, 55);
		}
		else{//обнуляем на выходе
			obj.opacity=0;
			obj.filter='alpha(opacity=0)';
			obj.visibility="hidden";
		};
	};
</script>
</head>
 
<body>
	<a href="#" onclick="winOpen();">Войти</a><br><br>
	<div id="divWin">
		<div id="closetButton" onclick="winCloset();">
			Х
		</div>
	</div>
 
</body>
</html>
...
Рейтинг: 0 / 0
23.05.2016, 16:47
| Ответить | Цитировать | Написать  
Появление блока div при нажатии на ссылку
    #39241551
Askm
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Askm
Гость
Спасибо, это вполне сойдет.
...
Рейтинг: 0 / 0
23.05.2016, 16:48
| Ответить | Цитировать | Написать  
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Появление блока div при нажатии на ссылку
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]