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

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

natashka.zavorotkina

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

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

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

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

68 | 0

javascript html css

1 ответ

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

jaren

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

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

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

2 | 0

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

1 ответ

Похожие обсуждения: