Есть ли в HTML способ с php для перемещения между несколькими модалами? - PullRequest
Новая
       4

Есть ли в HTML способ с php для перемещения между несколькими модалами?

0 голосов
/ 19 апреля 2020

Я создаю модальный вход в систему, который будет включать несколько модальностей для регистрации, выхода из системы и обновления регистрации. Какой эффективный способ справиться со всеми модалами? Моя HTML главная страница - это «index.php», который выглядит следующим образом. 

<?php
/*
 *  Programming Title Block
*/
…
    include('account/registration/login_code.php');
?>
<!DOCTYPE html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <?php include("view/head.php"); ?>
    </head>
    <body class='homePage_bg'>
        <?php include("view/header.php"); ?>
        <?php include("view/nav.php"); ?>
        <div class="content">
            <?php include('account/registration/login.php'); ?>
        <article>
…
        </article>
        </div>
        <?php include("view/footer.php"); ?>
    </body>
</html>

Имя входа. php Файл требует дополнительной работы, но в настоящее время выглядит так: 

<!-- The Modal -->
<div id='id01' class='modal'>
    <span onclick="document.getElementById('id01').style.display='none'"
        class="close" title="Close Modal">&times;</span>
    <!-- Modal Content -->
    <form class="modal-content animate" method='post' action=''>
        <div class='modal-header'>
            <h2>Member Login</h2>
        </div>
        <div class="container">
            <label><i class="fas fa-user"></i> Name</label>
            <input type='text' class='form-control' name='username' />
            <label><i class="fas fa-lock"></i> Password</label>
            <input type='password' class='form-control' name='password' />
        </div>
        <div class='modal-footer'>
            <input type='submit' class='btn btn-default' name='login' data-dismiss='modal' value='Login' />
            <input type='button' class='btn btn-primary' name='cancel' value='Cancel' 
                     onclick="document.getElementById('id01').style.display='none'" />
        </div>
    </form>
<script>
// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target === modal) {
    modal.style.display = "none";
  }
};
</script>
</div>

Файл «index_code.php» выглядит следующим образом: 

<?php
    if(!isset($_SESSION)){
        session_start();
    }
/*
 *  Programming Title Block
 */

    require_once('model/name_db.php');

    $dbna = new dbName();

    $_SESSION['$Registration_ID'] = null;
    unset($_SESSION['$Registration_ID']);

    if(filter_input(INPUT_POST, 'login')) {
        // username and password sent from form
        $userName = "'" . filter_input(INPUT_POST, 'username') . "'";
        $password = "'" . filter_input(INPUT_POST, 'password') . "'";

        try {
            list($name, $message1) = $dbna->get_name_by_userName_and_password($userName, $password);
            $message .= $message1;
            if(!$name) {
                $message .= "There was no matching User-Name and Password.";
            }
            else {
                $_SESSION["RegName_ID"] = $_SESSION["Name_ID"] = $nameID = $name['name_id'];
                $_SESSION["Security_ID"] = $name['security_id'];
                $_SESSION["fullName"] = $full_Name = $name['namefull'];
            }
        } catch(PDOException $e){
            $message .= $sql . "<br />" . $e->getMessage().'<br />';
        }
        header('Location: index.php');
    }
?>

Ранее у меня был файл Login. php на том же уровне, что и индекс главной страницы. php. В этот файл я включил эти php включения в раздел php и раздел HTML кодирования. 

<?php
…
include 'account/registration/LoginIndex_code.php';
?>
<!DOCTYPE html>
…
<?php include 'account/registration/LoginIndex.php'; ?>
…
The 'account/registration/LoginIndex.php' was as follows:
<?php //
/* 
 * Programming Title Block
 */
if(filter_input(INPUT_GET, 'action')) {
    $action = filter_input(INPUT_GET, 'action');
}
switch ($action) {
    case 'login':
        include('login.php');
        break;
    case 'regName':
        include('regName.php');
        break;
    case 'regAddress':
        include('regAddress.php');
        break;
…

Проблема с предыдущим кодом заключалась в том, что я использовал переменную действия URL для обновления состояние режима входа. Таким образом, модал действовал не как модал, а как веб-страница HTML. Спасибо за просмотр.

1 Ответ

0 голосов
/ 22 апреля 2020

Я изменил файл nav. php, чтобы иметь возможность войти в систему и раскрывающееся меню для регистрации выхода из системы и обновления. 

...
<?php if(!$full_Name){ ?>
                <a class="btn rightBtn" id='login'
                   onclick="document.getElementById('id01').style.display='block'" >Login</a>
<?php } else { ?>
                <div class="dropdown">
                    <button class="dropbtn">Logout
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a class="btn rightBtn" id='logout'
                            onclick="document.getElementById('id99').style.display='block'" >Logout</a>
                        <a class="btn" href="Login.php?action=updateName">Update Name</a>
                    </div>
                </div>
<?php } ?>
...

Модальное имя входа в систему теперь включает возможность регистрации 

...
        <div class='modal-footer'>
            <input type='submit' class='btn btn-default' name='login' data-dismiss='modal' value='Login' />
            <input type='button' class='btn' name='cancel' value='Cancel' 
                     onclick="document.getElementById('id01').style.display='none'" />
            <input type='button' class='btn' name='signup' value='Sign-Up' 
                     onclick="location.href='Login.php?action=regName'" />
        </div>
...

Таким образом, каждая страница веб-сайта теперь содержит код для модалов для входа в систему и выхода из нее, состояние которого переключается для отображения или не отображается с помощью элемента управления onclick. Регистрация и обновление Регистрация индексируется оператором switch, и соответствующий код вызывается в файл Login. php в root. Оператор switch читает действие URL.

...