Modal öffnen funktioniert nicht

mentle · 5. Januar 2018

Hallo zusammen,

ich bin dabei, eine Log-In Seite zu schreiben. Ich habe mich dafür entschieden, dafür ein Modal zu nutzen. Wenn jetzt z.B. ein User auf LogIn klickt und noch kein Account hat, soll er in diesem ersten Modal einen Button drücken und daraufhin soll sich das erste Modal schließen und sofort das zweite öffnen, in dem er sich registrieren kann.

Der bisherige Code dazu sieht so aus:

Code

<div id="myModal" class="modal">
  <!-- Modal content -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close_a">&times;</span>
    <span>Log-In</span>
  </div>
  <div class="modal-body">
    <form id="logInForm" action="">
        <span style="font-size: 1.1em;">Bitte geben Sie Ihre e-Mail Adresse und Ihr Passwort ein</span>
        <input class="input_fields_login" type="email" name="email" autofocus placeholder="e-Mail Adresse">
          <input class="input_fields_login" type="password" name="password" placeholder="Passwort">
    </form>
  </div>
  <div class="modal-footer">
    <div class="logInFormButton"><a id="account_new" href="">Noch kein Kunde?</a></div><div class="logInFormButton">
        <a href="" class="close_b">Weiter</a>
    </div>
  </div>
</div>


<div id="myModal2" class="modal2">
  <!-- Modal content -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close">&times;</span>
    <span>Registieren</span>
  </div>
  <div class="modal-body">
    <form id="logInForm2" action="">
        <span style="font-size: 1.1em;">Bitte geben Sie Ihre e-Mail Adresse und Ihr Passwort ein</span>
        <input class="input_fields_login" type="email" name="email" autofocus placeholder="e-Mail Adresse">
          <input class="input_fields_login" type="password" name="password" placeholder="Passwort">
          <input class="input_fields_login" type="password" name="password2" placeholder="Passwort wiederholen">

    </form>
  </div>
  <div class="modal-footer">
    <div class="logInFormButton"><a id="account_new2" href="">Doch ein Konto vorhanden?</a></div><div class="logInFormButton">
        <a href="">Weiter</a>
    </div>
  </div>
</div>


<script>
// Get the modal
var modal = document.getElementById("myModal");
var modal2 = document.getElementById("myModal2");

// Get the button that opens the modal
var btn = document.getElementById("logInButton");
var btn2 = document.getElementById("account_new");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}
btn2.onclick = function() {
    modal.style.display = "none";
    modal2.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span_a.onclick = function() {
    modal.style.display = "none";
}
span_b.onclick = function() {
    modal.style.display = "none";
}




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

Alles anzeigen

Der Fehler ist der, dass das erste Modal ohne Probleme öffnet und auch schließt. Allerdings schließt es auch, wenn man auf den Button "Noch kein Konto" drückt, aber das zweite Modal öffnet sich nicht.

Ich könnte auch sehr gut damit leben, wenn sich beim Klicken auf "Noch kein Konto" das erste Modal verändert, z.B. einfach ein anderer Text dasteht und die zweite Passwort Zeile erscheint. Daran beiße ich mir jetzt schon den ganzen Tag die Zähne aus.

Hat jemand den entscheidenden Tip?

JR Cologne · 5. Januar 2018

Hast du im folgenden Teil nicht einen Logik-Fehler?

JavaScript

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

Du überprüfst damit doch, ob das Modal angeklickt wurde und schließt es dann.

mentle · 5. Januar 2018

Nein, das funktioniert

basti1012 · 5. Januar 2018

hastdu nee testseite wo man sich das ankucken kann?

mentle · 5. Januar 2018

leider nicht

basti1012 · 6. Januar 2018

KANNST DU MAL DEN GANZEN CODE POSTEN MIT CSS UND SO

mentle · 6. Januar 2018

Code

<div id="myModal" class="modal">
  <!-- Modal content -->
    <div class="modal-content">
          <div class="modal-header">
            <span class="close">&times;</span>
            <span>Log-In</span>
          </div>

          <div class="modal-body">
            <form id="logInForm" action="kundenpflege.php" method="post">
            <span style="font-size: 1.1em;">Bitte geben Sie Ihre e-Mail Adresse und Ihr Passwort ein</span>
            <input class="input_fields_login" type="email" name="email" autofocus placeholder="e-Mail Adresse" required>
              <input class="input_fields_login" type="password" name="password" placeholder="Passwort" required>
        </div>

          <div class="modal-footer">
            <div class="logInFormButton">
                <button id="neu_konto" type="button" name="neu_konto">Noch kein Konto?</button>
            </div>
            <div class="logInFormButton">
                <input type="submit" name="weiter" value="Senden">
            </form>
            </div>
          </div>
    </div>
</div>



<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("logInButton");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//get the element that makes the modal larger
var large = document.getElementById("neu_konto");

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}


// when the user clicks the modal will get larger
large.onclick = function() {
    var content = document.getElementsByClassName("modal-content")[0];
    content.style.height = "60%";
    var neues_objekt = document.createElement("input");
    var att = document.createAttribute("class");
    att.value = "input_fields_login";
    neues_objekt.setAttributeNode(att);

    neues_objekt.type = "password";
    neues_objekt.name = "password2";
    neues_objekt.placeholder = "Bitte Passwort wiederholen";
    var vorh_obj = document.getElementsByClassName("input_fields_login")[1];
    vorh_obj.appendChild(neues_objekt);

}

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

/* The Modal (background) */
    .modal {
        box-sizing: border-box;
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 200px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color  */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }


    /* Modal Content */
    .modal-content {
        box-sizing: border-box;
        position: relative;
        background-color: gray;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 30%;
        height: 50%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.6s
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    /* The Close Button */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        box-sizing: border-box;
        margin-top: 0;
        display: block;
        height: 20%;
        background-color: lightgray;
        color: white;
        text-align: center;
    }

    .modal-body {
        box-sizing: border-box;
        margin-top: 0;
        display: block;
        height: 60%;
        padding: 0;
    }

    .modal-footer {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        margin-top: 0;
        height: 20%;
        background-color: lightgray;
        color: white;
    }
    .logInFormButton {
        box-sizing: border-box;
        width: 35%;
        height: 80%;
        float: left;
        margin-left: 10%;
        text-align: center;


    }

    .logInFormButton input, .logInFormButton button {
        width: 100%;
        height: 100%;
        color: black;
        border: 1px darkgray solid;
    }


    .logInFormButton input:hover:not(.active), .logInFormButton button:hover:not(.active) {
        background-color: gray;
        color: white;
    }



    .input_fields_login {
        box-sizing: border-box;
        width: 90%;
        margin-top: 10px;
        font-size: 1.2em;


    }
    #logInForm {
        text-align: center;
        margin-top: 1em;

    }

Alles anzeigen

JR Cologne · 6. Januar 2018

Du hast mindestens einen Fehler, den ich auf die schnelle entdeckt habe: Zeile 44, btn ist null.

Die ID, die du in Zeile 35 angibst, existiert in deinem HTML nicht.

Greife bitte mal auf die Konsole deines Browsers für Fehlermeldungen zurück (F12).

Schau mir das morgen nochmal etwas genauer an.

mentle · 6. Januar 2018

Servus,

die ID gibt es, ich habe diese Zeile nur vergessen hier reinzukopieren.

Wie gesagt, das erstmalige aufrufen des Modals klappt ja auch, eben so wie das vergrößern.

Nur diese zusätzliche Input Zeile wird nicht generiert. Der Fehler muss im Script liegen.

JR Cologne · 6. Januar 2018

Ich kann dein Problem so nicht reproduzieren, wenn du immer nur halbgare Sachen hier postest.

Falls es allgemein Syntaxfehler oder ähnliches gibt, verbessere das erstmal.

Anschließend brauchen wir dann den kompletten Code, so wie du ihn auch vorliegen hast.

basti1012 · 6. Januar 2018

deshalb ist es sinnvoll den ganzen code hier rein kopieren damit sows nicht passiert. kannst du nochmal den code komplett zeigen ,ist einfacher für uns den fehler zu finden

basti1012 · 6. Januar 2018

Zitat von mentle

Ich könnte auch sehr gut damit leben, wenn sich beim Klicken auf "Noch kein Konto" das erste Modal verändert, z.B. einfach ein anderer Text dasteht und die zweite Passwort Zeile erscheint. Daran beiße ich mir jetzt schon den ganzen Tag die Zähne aus.

Hat jemand den entscheidenden Tip?

soll da jetzt ein modal aufgehen . dann auf klicken des buttons "NOCHKEIN KONTO" sichh dasmodal veändern mit neuen text? wie soll das erste modal aussehen? wie dann der 2 text der dann da reinkommen soll? erklär mal dann schreibe ich dir da was zu recht. währe nur gut eine detalierte anleitung zu bekommen weil ich ab und zu schwer von begriff bin

mentle · 6. Januar 2018

Servus zusammen,

Danke schon mal für die Antworten.

Also, das ganze soll so aussehen:

Beim Klicken von LogIn öffnet sich ein Modal mit Header, Body, Footer. Im Body der Text "Bitte eMail Adr. und PW eingeben" und entsprechend die beiden Input Zeilen.

Im Footer der Sumbit Button und ein Button "Noch kein Konto?"

Beim Klicken von "Noch kein Konto?" erweitert sich dar Modal-Body, der Button "Noch kein Konto?" verschwindet und im Body erscheint eine zweite Input Zeile, in der das Passwort nochmals eingegeben werden soll.

Hier der komplette Code:

PHP

<?php
session_start();
?>

<!doctype html>
<html lang="de">

<head>
    <meta charset="UTF-8">

    <meta http-equiv="content-type"
        content="text/html; charset=utf-8">
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="style-dpl2.css">



</head>

<body>

<header>

</header>

<main>

<nav id="oberenav">
<ul>
    <li><a class="active" href="dpl-index2.php">Home</a></li><li><a href="about-dpl2.php">About</a></li><li><a href="auswertung2.php">Auswertung</a></li><li><a href="auswertung.php">Noch eine Kategorie</a></li><li><a id="logInButton">Log-In</a></li>
</ul>
</nav>
<div id="inhalt">
<img id="bild1" src="flugzeug2.jpg">
<div id="inhalt-text">
<div>
<?php
if(isset($_SESSION["user"])){
echo "Angemeldet als: " . $_SESSION["user"];
}
?>
</div>

<div id="myModal" class="modal">
  <!-- Modal content -->
    <div class="modal-content">
          <div class="modal-header">
            <span class="close">&times;</span>
            <span>Log-In</span>
          </div>

          <div class="modal-body">
            <form id="logInForm" action="kundenpflege.php" method="post">
            <span style="font-size: 1.1em;">Bitte geben Sie Ihre e-Mail Adresse und Ihr Passwort ein</span>
            <input class="input_fields_login" type="email" name="email" autofocus placeholder="e-Mail Adresse" required>
              <input class="input_fields_login" type="password" name="password" placeholder="Passwort" required>
        </div>

          <div class="modal-footer">
            <div class="logInFormButton">
                <button id="neu_konto" type="button" name="neu_konto">Noch kein Konto?</button>
            </div>
            <div class="logInFormButton">
                <input type="submit" name="weiter" value="Senden">
            </form>
            </div>
          </div>
    </div>
</div>



<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("logInButton");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//get the element that makes the modal larger
var large = document.getElementById("neu_konto");

// When the user clicks the button, open the modal
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}


// when the user clicks the modal will get larger
large.onclick = function() {
    var content = document.getElementsByClassName("modal-content")[0];
    content.style.height = "60%";
    var neues_objekt = document.createElement("input");
    var att = document.createAttribute("class");
    att.value = "input_fields_login";
    neues_objekt.setAttributeNode(att);

    neues_objekt.type = "password";
    neues_objekt.name = "password2";
    neues_objekt.placeholder = "Bitte Passwort wiederholen";
    var vorh_obj = document.getElementsByClassName("input_fields_login")[1];
    vorh_obj.appendChild(neues_objekt);

}

// 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 id="text">
</div>





<h1 style="text-align: center">Analyse</h1>





</div>


</div>




</main>

<footer>
    <nav class="untenrechts">
        <a href="kontakt.php">Kontakt  |</a>
        <a href="impressum.html">Impressum  |</a>
        <a href="datenschutz.php">Datenschutz  |</a>
        <a href="agb.php">AGB</a>
    </nav>
</footer>

</body>

</html>

Alles anzeigen

Code

/* The Modal (background) */
    .modal {
        box-sizing: border-box;
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 200px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color  */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }


    /* Modal Content */
    .modal-content {
        box-sizing: border-box;
        position: relative;
        background-color: gray;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 30%;
        height: 50%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.6s
    }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
    }

    /* The Close Button */
    .close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modal-header {
        box-sizing: border-box;
        margin-top: 0;
        display: block;
        height: 20%;
        background-color: lightgray;
        color: white;
        text-align: center;
    }

    .modal-body {
        box-sizing: border-box;
        margin-top: 0;
        display: block;
        height: 60%;
        padding: 0;
    }

    .modal-footer {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        margin-top: 0;
        height: 20%;
        background-color: lightgray;
        color: white;
    }
    .logInFormButton {
        box-sizing: border-box;
        width: 35%;
        height: 80%;
        float: left;
        margin-left: 10%;
        text-align: center;


    }

    .logInFormButton input, .logInFormButton button {
        width: 100%;
        height: 100%;
        color: black;
        border: 1px darkgray solid;
    }


    .logInFormButton input:hover:not(.active), .logInFormButton button:hover:not(.active) {
        background-color: gray;
        color: white;
    }



    .input_fields_login {
        box-sizing: border-box;
        width: 90%;
        margin-top: 10px;
        font-size: 1.2em;


    }
    #logInForm {
        text-align: center;
        margin-top: 1em;

    }

Alles anzeigen

Funktionieren tut hierbei folgendes:

Das Modal kann geöffnet werden und beim Klicken von "Noch kein Konto?" erweitert es sich (von Height 50% auf 60%).

Allerdings wird das neue Element <INPUT> nicht erzeugt.

Danke für die Hilfe.

Grüße,

Michael

mentle · 6. Januar 2018

OK, hat sich erledigt. Hab es hinbekommen.

Danke trotzdem an alle....

Code

large.onclick = function() {
    var content = document.getElementsByClassName("modal-content")[0];
    content.style.height = "60%";
    var neu = document.createElement("INPUT");
    var att = document.createAttribute("class");
    var att2 = document.createAttribute("required");
    att.value = "input_fields_login";
    neu.setAttributeNode(att);
    neu.setAttributeNode(att2);
    neu.type = "password";
    neu.name = "password2";
    neu.placeholder = "Bitte Passwort wiederholen";
    var vorh = document.getElementById("logInForm");
    vorh.appendChild(neu);
    

}

Alles anzeigen

JR Cologne · 6. Januar 2018

Was war das Problem, wenn man fragen darf?

mentle · 6. Januar 2018

Das Input Feld wurde am falschen Node eingesetzt.

Modal öffnen funktioniert nicht

Jetzt mitmachen!

Teilen