Всплывающий блок на JS

@Николай16 · Регистрация: 13.12.2015

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

Как сделать чтобы мой сплывающий блок ставал всегда сверху + написать кнопку которая будет его закрывать?

PHP/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
        background-color: #ccc;
        font-family: PT Sans, sans-serif;
        position: absolute;
    }
    #block {
        position: relative;
        margin: 0 auto;
        display: none;
        background: #000;
        width: 200px;
        height: 200px;
        border-radius: 3%;
    }
    #text {
        color: white;
        text-align: center;
 
    }
    #block:hover {
        cursor: pointer;
    }
</style>
</head>
<body>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    dsfsdfsdfsdffdsfsdfsdfdsfsdfsdfds<br>
    <div id="block"></div>
    <span class="close" onclick="document.getElementById('block').style.display='none'">Closed</span>
 
    <script>
        var block=document.getElementById('block');
        function Name() {
            block.style.display="block";
            var span = document.getElementsByClassName("close")[0];
            span.onclick = function(){
                modal.style.display = "none";
            }
        }
        setTimeout(Name, 2000);
        
 
 
    </script>
    
</body>
</html>

@MrOnlineCoder · 23.09.2017, 16:32

Николай16, на 62 строке modal - не определенная переменная, нужно использовать block:

JavaScript
1
2
3
span.onclick = function(){
  block.style.display = "none";
}

И что означает ставал всегда сверху? Сверху страницы или поверх всех элементов?

Новые блоги и статьи Все статьи Все блоги /
Киев стоит - украинская песня zorxor 28.01.2026 wfWdiRqdTxc О Господи, Вечный, Ты . . . Я помоги, Бесконечный. . . Я прошу Ты. . . Я погибаю, спаси. . . Я прошу Тебя Вечный. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

Всплывающий блок на JS

Решение