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

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

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

Кто может помочь?
Нужно преобразовать вот этот код

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
<html>
<head>
<title>УЧЕБНИК</title>
<style type="text/css">
<!--
body {
    background-image: url(../Files/g1.jpg); 
}
.стиль1 {color: #0000FF}
.стиль2 {color: #FF0000}
-->
</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
 
<body>
<h3 align="center">текст 1</h3>
<h3 align="center">текст 2</h3>
<h3 align="center">текст 3</h3>
<h2 align="center">&nbsp;</h2>
<h2 align="center">&nbsp;</h2>
<h2 align="center" class="стиль1">текст 4</h2>
<h2 align="center" class="стиль1">текст 5</h2>
<p align="center">&nbsp;</p>
<h1 align="center" class="стиль2">текст 6</h1>
<p>&nbsp;</p>
<p align="center"><a href="wf1.html" target="_top"><img src="../Files/K1.png" width="363" height="60" border="0" /></a></p>
<p align="center">&nbsp;</p>
<p><a href="1.php"><img src="../Files/admin.png" width="230" height="52" border="0" /></a></p>
<marquee height="100" width="1366">
<h3>текст 7</H3>
<p>&nbsp;</H3>
<p>&nbsp;</H3>
<p>&nbsp;</H3>
<p><img src="../Files/artur.gif" width="80" height="15" border="0" /></H3>
</body>
</html>

так что бы при нажатии на картинку

HTML5
1
<img src="../Files/admin.png" width="230" height="52" border="0" /></a></p>

открывалось модальное окно с кнопками "ссылка№1" и "ссылка№2"

@kalabuni · 03.06.2012, 07:55

Нестандартное "модальное окно" (которое полностью заблокирует окно браузера до закрытия этого самого модального окна) средствами javascript создать невозможно.
Потому как, например, не дать клиенту возможности пользоваться ползунками вертикального и горизонтального скролла вы с помощью js не сможете.

Ну а псевдо-модальное (ограничивающее доступ к телу страницы) делается с помощью "включения" контейнера с "верхним" z-index размерами 100% на 100% и имеющим фон, отличный от transparent, поверх которого (с ещё бОльшим z-index) выводится контейнер, с нужными вам ссылками/кнопками.

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
<body>
<div id="fon" style="width: 100%; height: 100%; z-index: 5;
                     background: white; filter: alpha(opacity=70); opacity: .7;
                     position: absolute; left: 0; top: 0;
                     display: none"></div>
 
<div id="mdw" style="width: 200px; z-index: 10;
                     background: lime;
                     position: absolute; left: 300px; top: 200px;
                     font-size: 20px; line-height: 80px; text-align: center;
                     display: none"><a href="http://google.com/">Link1</a><br>
<a href="http://yandex.ru/">Link2</a></div>
 
<!-- прочее содержание страницы -->
 
<img src="https://www.cyberforum.ru/Files/admin.png" width="230" height="52" border="0"
     onclick="myFunc ()">
<script>
function myFunc ()
{
document.getElementById ('fon').style.display = '';
document.getElementById ('mdw').style.display = '';
}
</script>
</body>

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .