Назад Вперед Зміст

ЛАБОРАТОРНА РОБОТА № 6

📌 Приклад: форма з динамічним модальним вікном (замість popup)

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Форма оформлення тексту</title>
    <style>
        table { margin:20px; border-collapse:collapse; }
        td { padding:10px; }

        /* МОДАЛЬНЕ ВІКНО */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0; top: 0;
            width: 100%; height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .modal-content {
            background: white;
            margin: 5% auto;
            padding: 20px;
            border-radius: 12px;
            max-width: 600px;
            box-shadow: 0 10px 30px #00000055;
        }
        .close-button {
            float: right;
            font-size: 30px;
            cursor: pointer;
        }
        .modal-footer { text-align: right; margin-top: 20px; }
    </style>
</head>
<body>
    <h1>Форма оформлення тексту</h1>
    <form id="textForm">
        <table>
            <tr><td>Заголовок:</td><td><input type="text" id="title" required></td></tr>
            <tr><td>Текст:</td><td><textarea id="paragraph" rows="4" required></textarea></td></tr>
            <tr><td>Колір фону:</td>
                <td>
                    <label><input type="radio" name="bgColor" value="lightblue" checked> Блакитний</label><br>
                    <label><input type="radio" name="bgColor" value="lightgreen"> Зелений</label>
                </td>
            </tr>
            <tr><td>Шрифт заголовка:</td>
                <td>
                    <select id="fontFamily">
                        <option value="Arial">Arial</option>
                        <option value="Comic Sans MS">Comic Sans MS</option>
                    </select>
                </td>
            </tr>
            <tr><td>Накреслення:</td>
                <td>
                    <label><input type="checkbox" id="italic"> Курсив</label><br>
                    <label><input type="checkbox" id="underline"> Підкреслення</label>
                </td>
            </tr>
            <tr><td>Міжрядковий інтервал:</td>
                <td>
                    <label><input type="radio" name="lineSpacing" value="1.5" checked> 1.5</label><br>
                    <label><input type="radio" name="lineSpacing" value="2"> 2</label>
                </td>
            </tr>
            <tr><td>Картинка:</td>
                <td>
                    <select id="imageChoice">
                        <option value="dog">Собака</option>
                        <option value="cat">Кіт</option>
                    </select>
                </td>
            </tr>
            <tr><td colspan="2">
                <button type="button" onclick="openModal()">Start</button>
                <button type="reset">Reset</button>
            </td></tr>
        </table>
    </form>

    <!-- Модалка -->
    <div id="previewModal" class="modal">
        <div class="modal-content">
            <span class="close-button" onclick="closeModal()">&times;</span>
            <h2 id="modal-title">Попередній перегляд</h2>
            <div class="modal-body" id="modal-body"></div>
            <div class="modal-footer">
                <button onclick="closeModal()">Закрити</button>
            </div>
        </div>
    </div>

    <script>
        const modal = document.getElementById('previewModal');
        const modalBody = document.getElementById('modal-body');

        function openModal() {
            // зчитування даних форми
            const title = document.getElementById('title').value;
            const paragraph = document.getElementById('paragraph').value;
            const bgColor = document.querySelector('input[name="bgColor"]:checked').value;
            const fontFamily = document.getElementById('fontFamily').value;
            const italic = document.getElementById('italic').checked;
            const underline = document.getElementById('underline').checked;
            const lineSpacing = document.querySelector('input[name="lineSpacing"]:checked').value;
            const imageChoice = document.getElementById('imageChoice').value;

            if (!title || !paragraph) { alert('Заповніть поля!'); return; }

            let titleStyle = '';
            if (italic) titleStyle += 'font-style: italic; ';
            if (underline) titleStyle += 'text-decoration: underline; ';

            const imageSrc = imageChoice === 'dog' ? 'dog.jpg' : 'cat.jpg';

            // формуємо вміст модалки
            modalBody.innerHTML = `
                <style>
                    .preview-container {
                        background-color: ${bgColor};
                        font-family: ${fontFamily};
                        line-height: ${lineSpacing};
                        padding: 20px;
                    }
                    .preview-title { ${titleStyle} }
                </style>
                <div class="preview-container">
                    <h3 class="preview-title">${title}</h3>
                    <p>${paragraph}</p>
                    <img src="${imageSrc}" alt="${imageChoice}" width="300">
                </div>
            `;

            modal.style.display = 'block';
            document.getElementById('modal-title').innerText = `Перегляд: ${title}`;
        }

        function closeModal() {
            modal.style.display = 'none';
        }

        window.onclick = function(e) {
            if (e.target === modal) closeModal();
        }
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && modal.style.display === 'block') closeModal();
        });
    </script>
</body>
</html>

📋 Таблиця варіантів завдань (1–17)

Назад Вперед Зміст