Login über die aktuelle Seite hängen

trippy · 21. Juli 2020

Guten Abend Community,

aktuell arbeite ich an einem Marktplatz für einen Server, hänge jedoch vor einen Problem. Ich möchte es verwirklichen, dass sobald der Nutzer oben rechts auf Anmelden klickt, ein weiteres Fenster auf der aktuellen Seite erscheint, in dem er die Login Daten eingeben sollte.

Ich habe lediglich eine Lösung gefunden, dass ganze zu realisieren, in dem man eine komplett neue Seite aufruft. Möchte es aber gerne so haben, dass der Hintergrund dann etwas verblasst, so dass das Login im Vordergrund steht und die Funktionen auf die eigentlichen Buttons der Seite (Verkäufer kontaktieren, Sofortkaufen) blockiert, bis das Login Fenster geschlossen wird.

Hat da jemand einen Lösungsansatz?

LeonMrBonnie · 21. Juli 2020

Benutzt du ein Frontend Framework? Falls ja, wird das wahrscheinlich bereits damit möglich sein. Falls nicht würde ich dir empfehlen eins zu verwenden, oder dir die Implementation einfach abzugucken. Weil das nicht so einfach ist.

trippy · 21. Juli 2020

Ja, bootstrap.

LeonMrBonnie · 21. Juli 2020

Ich denke einfach mal Bootstrap 4?

Du suchst nach Modals: https://getbootstrap.com/docs/4.5/components/modal/

trippy · 21. Juli 2020

Anbei jetzt die Frage, wie ich von meiner navigation.php, dass ganze zu meiner login.php leite.

Code: navigation.php

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <img src="img/logo.png" alt="" />
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <button type="button" href="login.php" class="btn btn-success" data-toggle="modal" data-target="#staticBackdrop">Anmelden</button>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Alles anzeigen

PHP: login.php

<body>
    <?php include ('navigation.php'); ?>
    <div class="container">
        <?php include ('item-navigation.php'); ?>    
            <div class="col-lg-9">
                <?php include ('slider.php'); ?>        
            </div>
            <?php include ('vehicles.php'); ?>
        </div>
    </div>
  </div>
  <?php include('footer.php'); ?>
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Alles anzeigen

LeonMrBonnie · 21. Juli 2020

Du möchtest also dass die Daten von der Form an deine login.php gesendet wird? Dann würd ich einfach mal sagen, du benutzt JS um beim onclick Event die Daten mit fetch an die login.php weiterzugeben

Canna · 21. Juli 2020

Zitat von LeonMrBonnie

Du möchtest also dass die Daten von der Form an deine login.php gesendet wird? Dann würd ich einfach mal sagen, du benutzt JS um beim onclick Event die Daten mit fetch an die login.php weiterzugeben

Einfach per Attribute die login.php angeben im Formular. Javascript wäre aber schöner, damit die Überprüfungen (Passwort) im Hintergrund passiert.

trippy · 21. Juli 2020

Nicht die Daten direkt von der Form an meine login.php senden. Eher möchte ich, dass hier vom Button der staticBackdrop aufgerufen wird, aber der Code vom staticBackdrop in der login.php liegt.

<button type="button" href="login.php" class="btn btn-success" data-toggle="modal" data-target="#staticBackdrop">Anmelden</button>

Canna · 21. Juli 2020

Das kannst du einfach via include in PHP.

trippy · 21. Juli 2020

Ja, aber mit meinem aktuellen Code klappt es leider nicht. Das modal Fenster erscheint nicht.

PHP: login.php

<body>
    <?php include ('navigation.php'); ?>
    <div class="container">
        <?php include ('item-navigation.php'); ?>    
            <div class="col-lg-9">
                <?php include ('slider.php'); ?>        
            </div>
            <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    ...
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Understood</button>
                  </div>
                </div>
              </div>
            </div>
            <?php include ('vehicles.php'); ?>
        </div>
    </div>
  </div>
  <?php include('footer.php'); ?>
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Alles anzeigen

Code: navigation.php

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <img src="img/logo.png" alt="" />
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <button type="button" href="login.php" class="btn btn-success" data-toggle="modal" data-target="#staticBackdrop">Anmelden</button>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Alles anzeigen

Canna · 22. Juli 2020

Hast du dir den Link von Leon angesehen ? Wieso steht im Button href login.php. müsstest schon den Code von der o.g. Seite nehmen und ihn dir anpassen.

trippy · 22. Juli 2020

Zitat von Canna

Hast du dir den Link von Leon angesehen ? Wieso steht im Button href login.php. müsstest schon den Code von der o.g. Seite nehmen und ihn dir anpassen.

Ja klar, aber das funktioniert doch nicht nach dem Prinzip. Der Button liegt in der navigation.php, aber der Code soll in der login.php ausgeführt werden, in dem das Fenster erscheint.

Canna · 22. Juli 2020

Das ist völlig egal, wo der Code sich befindet. Wxhtig ist, dass der Button eine ID zugewiesen bekommt und es einen div gibt, mit dieser ID.

breadfish.de 12. März 2022