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

Пользователь

от natashka.zavorotkina , в категории: JavaScript , год назад

у меня есть секция "задания" на странице. В этом окне есть 3 кнопки:

По нажатию на кнопку появляется новое окно, которое содержит само задание (поле, в котором выводится рандомно значение от 1 до 1 111 111 111), кнопку "назад" и кнопку "показать следующее задание":

Как это можно реализовать? Каким способом/методом создавать эти "окна" и переключаться между ними при помощи кнопок?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jaren , год назад

@natashka.zavorotkina  Я делал что то похожее в университете, такой мини обучающий сайт и я сейчас не могу точно найти полный код и я еще поищу и возможно найду готовый вариант, но примерно можно что то вроде такого ипспользовать:

 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
<!doctype html>
<html lang="ru">
<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        width: 80%;
        border: 1px solid #888;
        border-radius: 10px;
    }

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>

<button id="showTask">Показать задание</button>

<div id="taskModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p id="taskNumber"></p>
        <button id="back">Назад</button>
        <button id="nextTask">След задание</button>
    </div>
</div>

<script>
    const showTaskBtn = document.getElementById("showTask");
    const taskModal = document.getElementById("taskModal");
    const taskNumber = document.getElementById("taskNumber");
    const backBtn = document.getElementById("back");
    const nextTaskBtn = document.getElementById("nextTask");
    const closeBtn = document.getElementsByClassName("close")[0];

    showTaskBtn.addEventListener("click", function () {
        taskNumber.innerHTML = Math.floor(Math.random() * 1111111111 + 1);
        taskModal.style.display = "block";
    });

    backBtn.addEventListener("click", function () {
        taskModal.style.display = "none";
    });

    nextTaskBtn.addEventListener("click", function () {
        taskNumber.innerHTML = "test"
    })

</script>

</html>