Как создать iframe с параметрами страницы, которые можно нажать для раскрытия?

На чтение 4 мин Опубликовано 18.09.2024

Содержание

Вопрос или проблема
Ответ или решение
Шаг 1: Структура HTML
Шаг 2: Стили CSS
Шаг 3: Скрипт JavaScript
Объяснение кода
Заключение

Вопрос или проблема

Я не был уверен, как сформулировать или найти этот вопрос, извините. Я стремлюсь создать страницу портфолио художника, которая приведет вас на главную страницу. Затем на странице будут шесть секций в круге для различных жанров (рисование, письмо, музыка и т. д.), каждая из которых будет отображать мини-превью этой подсекции. Я хочу, чтобы при нажатии на желаемую подсекцию этот iframe увеличивался (анимированно) примерно до 90% экрана, с маленькой кнопкой выхода в углу сверху, чтобы снова уменьшить его до основной страницы. (Также я хочу, чтобы iframe расширялся только при первом нажатии, потому что после его расширения вам нужно будет нажимать еще раз для навигации) спасибо!!

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

Ответ или решение

Создание интерактивного iframe для вашего портфолио требует использования HTML, CSS и JavaScript. Давайте разберем пошагово, как достичь желаемого эффекта.

Шаг 1: Структура HTML

Сначала создадим базовую структуру HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Портфолио</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="portfolio">
        <div class="section" data-url="drawing.html">Рисование</div>
        <div class="section" data-url="writing.html">Письмо</div>
        <div class="section" data-url="music.html">Музыка</div>
        <!-- Добавьте остальные секции -->
    </div>
    <div class="iframe-container" id="iframeContainer">
        <button id="closeButton">Закрыть</button>
        <iframe id="iframe" src="" frameborder="0"></iframe>
    </div>

    <script src="script.js"></script>
</body>
</html>

Шаг 2: Стили CSS

Теперь добавим стили, чтобы сделать интерфейс визуально привлекательным и анимированным:

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.portfolio {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.section {
    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.2s;
}

.section:hover {
    transform: scale(1.1);
}

.iframe-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s;
}

#iframe {
    width: 90%;
    height: 90%;
    transition: transform 0.5s;
}

#closeButton {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
}

Шаг 3: Скрипт JavaScript

Добавим функциональность для открытия и закрытия окна iframe:

document.querySelectorAll('.section').forEach(section => {
    section.addEventListener('click', function() {
        const url = this.dataset.url;
        const iframeContainer = document.getElementById('iframeContainer');
        const iframe = document.getElementById('iframe');

        iframe.src = url; 
        iframeContainer.style.display = 'flex'; 
        setTimeout(() => {
            iframeContainer.style.opacity = 1; 
        }, 10);
    });
});

document.getElementById('closeButton').addEventListener('click', function() {
    const iframeContainer = document.getElementById('iframeContainer');
    const iframe = document.getElementById('iframe');

    iframe.src = ''; // Очищаем источник, чтобы сбросить iframe
    iframeContainer.style.opacity = 0;
    setTimeout(() => {
        iframeContainer.style.display = 'none'; 
    }, 500);
});

Объяснение кода

HTML: Мы создаем контейнер для секций и отдельный контейнер для iframe. Каждая секция ссылается на свой подстраницу с помощью data-url.
CSS: Мы стилизуем секции и контейнер для iframe. Кнопка закрытия также стилизована.
JavaScript: Реализует функциональность выбора секции. При клике на секцию iframe загружает соответствующий URL, а контейнер для iframe становится видимым. Кнопка закрытия очищает src iframe и скрывает его.

Заключение

Эта структура и код позволят вам создать интерактивный iframe для вашего портфолио с возможностью выбора подстраниц и анимацией. Вы всегда можете адаптировать стили и функциональность в соответствии с вашими предпочтениями и требованиями. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!