software:development:web:docs:web:php:authorization_and_registration_in_a_modal_window
PHP авторизация и регистрация в модальном окне
- auth.php
<?php include "pages/header.php"; // Определяем список разрешенных страниц $allowed_pages = array('login', 'register', 'confirm', 'reset', '2fa', 'otp' , 'edit' ,'upload' ,'delete'); $page = $_GET['page'] ?? 'login'; // По умолчанию 'login' ?> <main> <article> <section> <div class="container"> <?php // Получаем значение из URL: index.php?page=login // Проверьте, находится ли запрошенная страница в списке разрешенных. if (in_array($page, $allowed_pages)) { // Безопасно подключить внешний файл include('pages/' . $page . '.php'); } else { // Обработать некорректный запрос страницы (страница не найдена). echo 'Page not found.'; } ?> </div> </section> </article> </main> <?php include "pages/footer.php"; ?>
- index.php
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8" /> <style> /* Задаем стили для всех кнопок */ button { background-color: #04AA6D; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; opacity: 0.9; } button:hover { opacity:1; } /* Дополнительные стили для кнопки отмены */ .cancelbtn { padding: 14px 20px; background-color: #f44336; } /* Добавляем обтекание и одинаковую ширину для кнопок отмены и регистрации */ .cancelbtn, .signupbtn { float: left; width: 50%; } /* Модальное окно (фон) */ .modal { display: none; /* По умолчанию скрыто */ position: fixed; /* Оставаться на месте */ z-index: 1; /* Поверх всего */ left: 0; top: 0; width: 100%; /* На всю ширину */ height: 100%; /* На всю высоту */ overflow: auto; /* Разрешить прокрутку при необходимости */ background-color: #474e5d; padding-top: 50px; } /* Кнопка закрытия (x) */ .close { position: absolute; right: 35px; top: 15px; font-size: 40px; font-weight: bold; color: #f1f1f1; } .close:hover, .close:focus { color: #f44336; cursor: pointer; } /* Очистка обтекания */ .clearfix::after { content: ""; clear: both; display: table; } /* Изменяем стили кнопок отмены и регистрации на маленьких экранах */ @media screen and (max-width: 300px) { .cancelbtn, .signupbtn { width: 100%; } } </style> </head> <body> <h2>Модальная форма регистрации</h2> <button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Регистрация</button> <h2>Пример модального окна</h2> <div> Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально -слухового восприятия. По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у некторых людей недоумение при попытках прочитать рыбу текст. В отличии от lorem ipsum, текст рыба на русском языке наполнит любой макет непонятным смыслом и придаст неповторимый колорит советских времен. </div> <div id="id01" class="modal"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Закрыть">×</span> <?php include "auth.php"; ?> </div> <script> // Получим модальное окно var modal = document.getElementById('id01'); // Когда пользователь кликнет за пределами модального окна, закроем его window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html>
Только авторизованные участники могут оставлять комментарии.
software/development/web/docs/web/php/authorization_and_registration_in_a_modal_window.txt · Последнее изменение: — VladPolskiy