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


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


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

Код: 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:48
    #39241551
Askm
Askm
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Появление блока div при нажатии на ссылку
Спасибо, это вполне сойдет.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Появление блока div при нажатии на ссылку / 5 сообщений из 5, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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