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

@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>

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

Опции темы