Маленькое окно

@Artur Black · Регистрация: 04.11.2011

Студворк — интернет-сервис помощи студентам

как на js написать маленькое окно с 3 кнопками?просто нужно что бы после нажатия на кнопку открывалось это маленькое окно а в нем три кнопки по нажатию на которые открывается большое окно!

@kalabuni · 29.05.2012, 21:08

Окна бывают разные.
Например, модальные, брузерные, стандартные...
Вам какие?

И зачем ТРИ кнопки, если, судя по вашему описанию, по нажатию на любую из них, откроется ещё одно окно?
Для пьяного делаете? Чтобы точно в одну из трёх попал?

@Artur Black · 29.05.2012, 22:27 **[ТС]**

В браузере маленькое окно посередине, я образно сказал одно, имею ввиду большое стандартное окно, при нажатии разные окна открываются

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

@newJS · 30.05.2012, 21:09

Artur Black, вопрос еще актуален?

@Artur Black · 30.05.2012, 21:38 **[ТС]**

актуален))))

@newJS · 31.05.2012, 06:31

когда то зачем то делал

HTML5
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>DIVное окно!</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="win_div6.css">
<script type="text/javascript" src="win_div6.js"></script>
<style type="text/css">
#divWin {position:absolute; width:300px; height:200px; border:3px solid green; background:white; visibility:hidden; padding:20px 20px 20px 20px; text-align:center;}
 
#closetButton {position:absolute; top:0; right:0; border-bottom:3px solid green; border-left:3px solid green; font-weight:bold; cursor:pointer; padding:2px 6px;}
 
/*цвет и максимальную "плотность" "плёнки" подбираем здесь*/
/* хорошие результаты даёт, все = 0.05, ие = 5 и цвет = white, а для демо навороченно для визуализации*/
#bodyBack {position:absolute; top:0; left:0; background:lime; opacity:0.3; display:none; filter:progid:DXImageTransform.Microsoft.alpha(opacity=30);}
</style>
<script type="text/javascript">
 
 
(function(){
var d, stepO, stepC, obj, dir, ops, end0, end1, end2;
stepO=3;    //шаг при появлении
stepC=5;    //шаг при закрытии
end1= 0;    //стоп при закрытии
end2= 100;  //стоп при появлении
dir=  0;    //шаг направление 
d=document;
 
 
 
onload=function(){
obj={
"divW":d.getElementById("divWin"), 
"divWs":d.getElementById("divWin").style, 
"bodyB":d.getElementById("bodyBack"), 
"bodyBs":d.getElementById("bodyBack").style, 
"butC":d.getElementById("closetButton")};
 
var el, w, h;
//центрируем окошко
w=obj.divW.offsetWidth;
h=obj.divW.offsetHeight;
obj.divWs.margin=(-(h/2))+'px 0 0 '+(-(w/2))+'px';
obj.divWs.top='50%';
obj.divWs.left='50%';
 
//похоже при вычислениях браузеры по разному округляют при делении, наверно здесь и образуется лишний пиксель
obj.bodyBs.width=obj.divW.offsetLeft*2+w-1+'px';//размер "плёнки"
obj.bodyBs.height=obj.divW.offsetTop*2+h-1+'px';
obj.bodyB.onclick=winCloset;
 
//события на крестик
obj.butC.onclick=winCloset;
obj.butC.onmouseover=function(){this.style.background="pink";};
obj.butC.onmouseout=function(){this.style.background="white";};
 
//вешаем клик на кнопку по которой попадём сюда
d.getElementById("butWin").onclick=winOpen;
 };
 
 
 
function winOpen(){
obj.bodyBs.display="block";
obj.divWs.visibility="visible";
ops=end1;
dir=stepO;
end0=end2;
OpenCloset();
 };
 
//щелчёк по "плёнке", мимо окна, или по крестику, закрывает окно
function winCloset(){
ops=end2;
dir=-stepC;
end0=end1;
OpenCloset();
 };
 
 
function OpenCloset(){
var ms=navigator.userAgent.search(/msie/i)>0;//а ты кто?
ops+=dir;
if(ops>end1&&ops<end2){
if(ms){obj.divWs.filter='alpha(opacity='+ops+')';}
else{obj.divWs.opacity=ops/100;};
setTimeout(OpenCloset, 55);}
else{//показать/удалить полностью
if(end0==0){
obj.bodyBs.display="none";
obj.divWs.visibility="hidden";};
if(ms){obj.divWs.filter='alpha(opacity='+end0+')';}
else{obj.divWs.opacity=end0/100;}};
 };
 
 
 
 
 })();
 
 
</script>
</head>
 
<body>
<!-- этот ДИВ накрывает всё окно блокирующей "плёнкой" -->
<div id="bodyBack"></div>
<div class="padd">
<!-- кнопка здесь для мебели, чтобы как то стартовать окно -->
<input value=" Гюльчатай! покажи, а? " type="button" id="butWin">
<!-- Само окно -->
<div id="divWin">
<div id="closetButton">Х</div>
<br><br><h2>Я не Гюльчатай<br>я DIVное окно!</h2>
</div>
</div>
 
<div>
<div>Кусок CSS2</div>
16.3.2 Оттенение текста: свойство 'text-shadow' <br>
'text-shadow' <br>
Значение: none | [&lt;color&gt; || &lt;length&gt; &lt;length&gt; &lt;length&gt;? ,]* [&lt;color&gt; || &lt;length&gt; &gt;length&gt; &lt;length&gt;?] | inherit  <br>
Начальное: none  <br>
Применяется:   ко всем элементам  <br>
Наследуется: нет (см. текст)  <br>
Процентное: N/A  <br>
Носитель: визуальный  <br>
<br>
Это свойство принимает список разделённых запятыми эффектов оттенения, применяемых к тексту элемента. Эффекты оттенения применяются в том порядке, в котором они специфицированы, и могут, таким образом, перекрываться один другим, но они никогда не перекрывают сам текст. Эффекты оттенения не изменяют размеры бокса, но могут выходить за его пределы. Уровень стэка эффекта оттенения - тот же самый, что и самого элемента.<br>
<br>
Каждый эффект оттенения обязан специфицировать смещение оттенения и может по выбору специфицировать радиус рассеяния и цвет тени.<br>
<br>
Смещение оттенения специфицируется двумя значениями &lt;length&gt;, указывающими расстояние от текста. Первое значение специфицирует расстояние по горизонтали справа от текста. Отрицательное значение по горизонтали помещает тень слева от текста. Второе значение специфицирует вертикальное расстояние под текстом. Отрицательное значение по вертикали помещает тень сверху от текста.<br>
<br>
Радиус рассеяния может быть по выбору специфицирован после смещения оттенения. Радиус рассеяния это значение, обозначающее границы эффекта рассеяния. Точный алгоритм вычисления эффекта рассеяния не специфицирован.<br>
<br>
Значение цвета может быть по выбору специфицировано до или после значений length эффекта оттенения. Значение цвета будет использоваться как базис эффекта оттенения. Если цвет не специфицирован, вместо него будет использоваться значение свойства 'color'. <br>
<br>
Оттенения текста могут использоваться вместе с псевдоэлементами :first-letter и :first-line. <br>
<br>
Пример(ы):<br>
<br>
Следующий пример установит тень справа и снизу от текста элемента. Поскольку цвет не специфицирован, тень будет того же цвета, что и сам элемент, и, поскольку радиус рассеяния не специфицирован, тень текста не будет рассеиваться:<br>
<br>
H1 { text-shadow: 0.2em 0.2em }<br>
Следующий пример установит тень справа и снизу от текста элемента. Тень будет иметь радиус рассеяния 5px и красный цвет: <br>
<br>
H2 { text-shadow: 3px 3px 5px red }<br>
Следующий пример специфицирует список эффектов оттенения. Первая тень будет справа и снизу от текста элемента и будет красного цвета без рассеяния. Вторая тень будет перекрывать первую и будет жёлтая, с рассеянием и размещена влево и ниже текста. Третья тень будет справа и сверху над текстом. Поскольку у неё цвет не специфицирован, будет использоваться значение свойства  'color' элемента:<br>
<br>
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }<br>
Пример(ы):<br>
<br>
Рассмотри этот пример: <br>
<br>
<pre>
SPAN.glow {
    background: white;
    color: white;
    text-shadow: black 0px 0px 5px;
}
</pre>
Здесь свойства &quot;background&quot; и &quot;color&quot; имеют одинаковые значения, и свойство &quot;text-shadow&quot; используется для создания эффекта &quot;солнечного  затмения&quot;:<br>
<br>
   [D]<br>
<br>
Примечание. Это свойство не определено в CSS1. Некоторые эффекты оттенения (такие как в последнем примере) могут делать текст невидимым в ПА, поддерживающих только CSS1. 
 
 
</div>
 
 
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Artur Black 1 / 1 / 1 Регистрация: 04.11.2011 Сообщений: 180

	Маленькое окно 29.05.2012, 21:00. Показов 2193. Ответов 5 Метки нет (Все метки) как на js написать маленькое окно с 3 кнопками?просто нужно что бы после нажатия на кнопку открывалось это маленькое окно а в нем три кнопки по нажатию на которые открывается большое окно! 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	29.05.2012, 21:08
	Окна бывают разные. Например, модальные, брузерные, стандартные... Вам какие? И зачем ТРИ кнопки, если, судя по вашему описанию, по нажатию на любую из них, откроется ещё одно окно? Для пьяного делаете? Чтобы точно в одну из трёх попал? 0

@Artur Black 1 / 1 / 1 Регистрация: 04.11.2011 Сообщений: 180
	29.05.2012, 22:27 [ТС]
	В браузере маленькое окно посередине, я образно сказал одно, имею ввиду большое стандартное окно, при нажатии разные окна открываются Добавлено через 5 минут Нет окна разные открываются, а надо маленькое окно в браузере посередине, в нем вопрос будет, и выбрав нужную кнопку человек переходит на нужную страницу страницу 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	30.05.2012, 21:09
	Artur Black, вопрос еще актуален? 0

@Artur Black 1 / 1 / 1 Регистрация: 04.11.2011 Сообщений: 180
	30.05.2012, 21:38 [ТС]
	актуален)))) 0