[HTML + JAVASCRIPT] Popup- & Weiterleitungsproblem

trtwx

Hey allseits hilfreiche Community!

Ich probiere mich derzeit an ein Bewerbungsformular. Den Codingstuff besorge ich mir von einer ''Tutorialseite'', wo ich mir die verschiedenen Sprachen auch derzeit aneigne und ich muss sagen, das ich echt gut zurecht komme, auch wenn ich mir noch vieles kopiere (hatet mich nicht :c ). Dementsprechend sieht das Formular auch nicht wirklich qualitativ aus, was es aber auch nicht muss.

Ich schildere mein Vorhabe mal in einem Spoiler um diesen Thread so clean wie nur möglich zu halten :

Spoiler anzeigen

Ich habe vor, ein Popup wie dieses :

erscheinen zu lassen als eine Art ''Absendebestätigung'', wenn ich auf den mit Javascript animierten Absendebutton des Formulars klicke :

Anschließend ist mein Vorhabe dann, mithilfe eines ''Schließen''-Buttons wie diesen :

eine Weiterleitung auf die Homepage zu machen (was kein weiteres Problem sein sollte, sofern oben beschriebenes Problem gelöst ist).

Jetzt zum Problem :

Wenn ich versuche mir einen Beispielcode zu kopieren und diesen in die richtigen Abschnitte einzufüge, die richtigen Buttons

und Verweise setze, passiert dennoch nichts was eigentlich passieren sollte. Hier mal der aktuelle, unbearbeitete Code :

CSS

<style>
body {
    background:
        radial-gradient(transparent, black),
        url("/bgg2.png");
}
.focus {
  width: 16%;
  padding: 8px 8px;
  box-sizing: border-box;
  border: 3px solid #ccc;
}

.focus:focus {
  background-color:#555555; 
  color: white;
  outline: none;
}
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #555;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  padding: 14px;
  width: 120px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 2px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
h1 {
    color: white;
    text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
h2 {
    color: white;
    text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
.bwinfo {
    color:white;
    text-align:center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.boxinfo {
    color:white;
    text-align:center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.footer {
    color:white;
    text-align:center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    margin-top:83px;
}
.hrr {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    position: absolute;
    margin-top: -72px;
}
a:hover, a:active {
    background-color: red;
}
.speech-bubble {
   position: absolute;
   width: 277px;
   height: 104px;
   line-height: 104px;
   color: #FFFFFF;
   text-align: center;
   padding: 3px;
   background: #555555;
   border-radius: 19px;
   border: #ffffff solid 2px;
   margin-left: 24%;
   margin-top: 6%;
}

.speech-bubble:after {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 13px 16px 0;
   border-color: #555555 transparent;
   display: block;
   width: 0;
   z-index: 1;
   bottom: -13px;
   left: 214px;
}

.speech-bubble:before {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 14px 17px 0;
   border-color: #ffffff transparent;
   display: block;
   width: 0;
   z-index: 0;
   bottom: -16px;
   left: 213px;
}
#bubbletxt {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.info {
    background-color: #e7f3fe;
    border-left: 6px solid #2196F3;
}

</style>

Alles anzeigen

HTML

<body>  

<!-- INFOTEXT USW -->

<center>

<!-- BEWERBUNGSFORMULAR -->

<?php
// define variables and set to empty values
$name = $alter = $email = $comment = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = test_input($_POST["name"]);
  $username = test_input($_POST["username"]);
  $alter = test_input ($_POST["alter"]);
  $email = test_input($_POST["email"]);
  $comment = test_input($_POST["text"]);
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

<img src="/twx3.png" style="position: absolute;margin-left: 17%;margin-top: 10%;"></img>
<img src="/annie3.png" style="position: absolute;margin-left: -22%;margin-top: 14%;"></img>
<p class="speech-bubble" id="bubbletxt"><strong>Wir warten auf Dich!</strong></p>

<h2>Bewerbungsinformationen:</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
  <strong class="boxinfo">Dein Name:</strong><br> <input class="focus" placeholder="Dein Reallife-Name..." type="text" name="name">
  <br><br>
  <strong class="boxinfo">Dein Username:</strong><br> <input class="focus" placeholder="Dein Ingame-Name..." type="text" name="username">
  <br><br>
  <strong class="boxinfo">Dein Alter:</strong><br> <input class="focus" placeholder="Dein Alter..." type="text" name="alter">
  <br><br>
  <strong class="boxinfo">Deine Email-Adresse:</strong><br> <input class="focus" placeholder="Deine Email-Adresse..." type="text" name="email">
  <br><br>
<select name="ranks" style="text-align:center;">
  <!-- <option value="communitymanager">Communitymanager</option>
  <option value="moderator">Moderator</option> -->
  <option value="xler">Xler</option>
  <option value="gamex">GameX</option>
  <option value="polizist">Polizist</option>
  <option value="dj">DJ</option>
</select>
  <br><br>
  <strong class="boxinfo">Warum sollten wir Dich einstellen?:</strong><br> <textarea class="focus" placeholder="Schreibe etwas über dich..." name="text" rows="5" cols="40"></textarea>
  <br><br>
  <button class="button" href="/index" style="vertical-align:middle"><span title="Sende deine Bewerbung ab">Absenden </span></button>   
  <br><br>
  <hr class="hrr" style="width:55%;">
</form>

<!-- BEWERBUNGSFORMULAR -->

</center>

<!-- FOOTER -->

<div class="footer">iFubbo &copy; 2017 ~ Powered by iFubbo-Team</div>

<!-- FOOTER -->

</body>

Alles anzeigen

Und hier mal der Code, wie es ist wenn es editiert ist, wie es sein soll :

CSS

<style>
body {
    background:
        radial-gradient(transparent, black),
        url("/bgg2.png");
}
.focus {
  width: 16%;
  padding: 8px 8px;
  box-sizing: border-box;
  border: 3px solid #ccc;
}

.focus:focus {
  background-color:#555555; 
  color: white;
  outline: none;
}
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #555;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  padding: 14px;
  width: 120px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 2px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
h1 {
    color: white;
    text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
h2 {
    color: white;
    text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
.bwinfo {
    color:white;
    text-align:center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.boxinfo {
    color:white;
    text-align:center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.footer {
    color:white;
    text-align:center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    margin-top:83px;
}
.hrr {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    position: absolute;
    margin-top: -72px;
}
a:hover, a:active {
    background-color: red;
}
.speech-bubble {
   position: absolute;
   width: 277px;
   height: 104px;
   line-height: 104px;
   color: #FFFFFF;
   text-align: center;
   padding: 3px;
   background: #555555;
   border-radius: 19px;
   border: #ffffff solid 2px;
   margin-left: 24%;
   margin-top: 6%;
}

.speech-bubble:after {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 13px 16px 0;
   border-color: #555555 transparent;
   display: block;
   width: 0;
   z-index: 1;
   bottom: -13px;
   left: 214px;
}

.speech-bubble:before {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 14px 17px 0;
   border-color: #ffffff transparent;
   display: block;
   width: 0;
   z-index: 0;
   bottom: -16px;
   left: 213px;
}
#bubbletxt {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.info {
    background-color: #e7f3fe;
    border-left: 6px solid #2196F3;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* 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 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    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.4s
}

/* 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 {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
</style>

Alles anzeigen

HTML

<body>  

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

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

// 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";
}

// When the user clicks on <span> (x), close the modal
span.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>

<!-- INFOTEXT USW -->

<center>

<!-- BEWERBUNGSFORMULAR -->

<?php
// define variables and set to empty values
$name = $alter = $email = $comment = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = test_input($_POST["name"]);
  $username = test_input($_POST["username"]);
  $alter = test_input ($_POST["alter"]);
  $email = test_input($_POST["email"]);
  $comment = test_input($_POST["text"]);
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

<img src="/twx3.png" style="position: absolute;margin-left: 17%;margin-top: 10%;"></img>
<img src="/annie3.png" style="position: absolute;margin-left: -22%;margin-top: 14%;"></img>
<p class="speech-bubble" id="bubbletxt"><strong>Wir warten auf Dich!</strong></p>

<h2>Bewerbungsinformationen:</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
  <strong class="boxinfo">Dein Name:</strong><br> <input class="focus" placeholder="Dein Reallife-Name..." type="text" name="name">
  <br><br>
  <strong class="boxinfo">Dein Username:</strong><br> <input class="focus" placeholder="Dein Ingame-Name..." type="text" name="username">
  <br><br>
  <strong class="boxinfo">Dein Alter:</strong><br> <input class="focus" placeholder="Dein Alter..." type="text" name="alter">
  <br><br>
  <strong class="boxinfo">Deine Email-Adresse:</strong><br> <input class="focus" placeholder="Deine Email-Adresse..." type="text" name="email">
  <br><br>
<select name="ranks" style="text-align:center;">
  <!-- <option value="communitymanager">Communitymanager</option>
  <option value="moderator">Moderator</option> -->
  <option value="xler">Xler</option>
  <option value="gamex">GameX</option>
  <option value="polizist">Polizist</option>
  <option value="dj">DJ</option>
</select>
  <br><br>
  <strong class="boxinfo">Warum sollten wir Dich einstellen?:</strong><br> <textarea class="focus" placeholder="Schreibe etwas über dich..." name="text" rows="5" cols="40"></textarea>
  <br><br>
  <button class="button" href="/index" id="myBttn" style="vertical-align:middle"><span title="Sende deine Bewerbung ab">Absenden </span></button>   
  <br><br>
  <hr class="hrr" style="width:55%;">
</form>

<!-- BEWERBUNGSFORMULAR -->

</center>

<!-- FOOTER -->

<div class="footer">iFubbo &copy; 2017 ~ Powered by iFubbo-Team</div>

<!-- FOOTER -->

</body>
</html>

Alles anzeigen

Es bleibt alles so wie es schon ohne Bearbeitung war. Der Absenden-Butten zeigt keine Reaktion, was mich bedrückt. Was mache ich falsch, was kann ich besser machen (abgesehen vom eigenen schreiben statt c&p)?

Liebe Grüße!

Analritter von Salzgitter

Liste mal bitte genau auf, was nicht funktioniert. Habe grad keine Lust das alles auszutesten / durch zu gehen. Schreib kurz und knapp was nicht funktioniert.

Werde dir das dann schnell anpassen. Sollen die Dinge, die im Formular eingegeben werden in eine Datenbank gespeichert werden? Besitzt du dazu bereits eine core.php?

trtwx

Gut, nochmal etwas knapper :

Ich möchte eine ''Modal-Box'' auftauchen lassen, sofern ich das Bewerbungsformular ausgefüllt und auf ''Absenden'' geklickt habe.
Diese sieht dann so aus : *klick*

Ich habe mir den dort angegebenen Code kopiert und in die .php-Datei eingefügt, welche halt das Formular ausgibt. Das wäre dann wie folgt in meiner Datei :

CSS

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* 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 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    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.4s
}

/* 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 {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

Alles anzeigen

HTML

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

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

// 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";
}

// When the user clicks on <span> (x), close the modal
span.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

mit dem dazugehörigen Auslöser, hier ein Button :

HTML

<button class="button" href="/index" id="myBttn" style="vertical-align:middle"><span title="Sende deine Bewerbung ab">Absenden </span></button>

Das ganze soll nun also wie auf dem Bild zu sehen über dem Formular aufploppen, damit ich dieses weiter editieren kann. Wenn ich den Button jetzt aber klicke, passiert nichts. Liegt es vielleicht auch an den animierten Button welcher bereits ein Script enthält?

Ich weiß leider nicht wie ich es NOCH ausfühlicher schreiben soll, außer es eventuell direkt zu präsentieren

Analritter von Salzgitter

Zitat von Andre Hen

Gut, nochmal etwas knapper :

Ich möchte eine ''Modal-Box'' auftauchen lassen, sofern ich das Bewerbungsformular ausgefüllt und auf ''Absenden'' geklickt habe.
Diese sieht dann so aus : *klick*

Ich habe mir den dort angegebenen Code kopiert und in die .php-Datei eingefügt, welche halt das Formular ausgibt. Das wäre dann wie folgt in meiner Datei :

CSS

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* 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 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    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.4s
}

/* 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 {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

Alles anzeigen

HTML

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

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

// 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";
}

// When the user clicks on <span> (x), close the modal
span.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

mit dem dazugehörigen Auslöser, hier ein Button :

HTML

<button class="button" href="/index" id="myBttn" style="vertical-align:middle"><span title="Sende deine Bewerbung ab">Absenden </span></button>

Das ganze soll nun also wie auf dem Bild zu sehen über dem Formular aufploppen, damit ich dieses weiter editieren kann. Wenn ich den Button jetzt aber klicke, passiert nichts. Liegt es vielleicht auch an den animierten Button welcher bereits ein Script enthält?

Ich weiß leider nicht wie ich es NOCH ausfühlicher schreiben soll, außer es eventuell direkt zu präsentieren

Alles anzeigen

Meine Frage war, was genau nicht funkt. Somit gehe ich davon aus, das es nur der Button ist, welcher nicht funkt

trtwx

Zitat von Analritter von Salzgitter

nur der Button

Naja, schon. Ich konnte es nicht auf den Punkt bringen, Verzeihung.
Aber durch den Button bin ich mir halt nicht sicher, ob der Rest auch mitspielt, oder ob es gar an dem ganzem vorher liegt, das der Button nicht funktioniert

Analritter von Salzgitter

Schaue es mir gleich an. Sende jedoch grad im Radio gedulde dich kurz

trtwx

Natürlich =)

Analritter von Salzgitter

Der Button, welcher das Pop up öffnen soll geht nicht, richtig?

trtwx

Ja das ist soweit richtig. Also die Animation funktioniert einwandfrei, nur halt die Popupfunktion nicht

Analritter von Salzgitter

Sende mal ganzen HTML Code, weil wo ist der Button, welcher das PopUp öffnen soll?

trtwx

Ich gebe einfach mal das gesamte .php-Dokument durch. Der Button wurde in nem Beitrag von mir ausgegeben, hier nochmal :

HTML

<button class="button" href="/index" id="myBttn" style="vertical-align:middle"><span title="Sende deine Bewerbung ab">Absenden </span></button>

Hier der gesamte Code :

PHP

<!DOCTYPE HTML>  
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- CSS-STUFF -->

<style>
body {
    background:
        radial-gradient(transparent, black),
        url("/bgg2.png");
}
.focus {
  width: 16%;
  padding: 8px 8px;
  box-sizing: border-box;
  border: 3px solid #ccc;
}

.focus:focus {
  background-color:#555555; 
  color: white;
  outline: none;
}
.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #555;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 15px;
  padding: 14px;
  width: 120px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 2px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
h1 {
    color: white;
    text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
h2 {
    color: white;
    text-shadow: -1px 0 black, 0 2px black, 2px 0 black, 0 -1px black;
}
.bwinfo {
    color:white;
    text-align:center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.boxinfo {
    color:white;
    text-align:center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.footer {
    color:white;
    text-align:center;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    margin-top:83px;
}
.hrr {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    position: absolute;
    margin-top: -72px;
}
a:hover, a:active {
    background-color: red;
}
.speech-bubble {
   position: absolute;
   width: 277px;
   height: 104px;
   line-height: 104px;
   color: #FFFFFF;
   text-align: center;
   padding: 3px;
   background: #555555;
   border-radius: 19px;
   border: #ffffff solid 2px;
   margin-left: 24%;
   margin-top: 6%;
}

.speech-bubble:after {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 13px 16px 0;
   border-color: #555555 transparent;
   display: block;
   width: 0;
   z-index: 1;
   bottom: -13px;
   left: 214px;
}

.speech-bubble:before {
   content: '';
   position: absolute;
   border-style: solid;
   border-width: 14px 17px 0;
   border-color: #ffffff transparent;
   display: block;
   width: 0;
   z-index: 0;
   bottom: -16px;
   left: 213px;
}
#bubbletxt {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
.info {
    background-color: #e7f3fe;
    border-left: 6px solid #2196F3;
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* 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 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    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.4s
}

/* 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 {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
</style>

<!-- CSS-STUFF -->

<!-- INFOTEXT USW -->

<h1 style="text-align:center;color:white;">iFubbo ~ Bewerbungsformular</h1><a href="/index" title="Zurück zu iFubbo">Zurück</a>
<br>
<p class="bwinfo"><strong>Hey! Hier kannst du dich für einen im Formular vorgegebenen Rang im iFubbo bewerben!<br>
                          Die Bearbeitung deiner Bewerbung kann <ins>bis zu 48 Stunden</ins> dauern, also gedulde dich.<br>
                          Solltest du keine weitere Antwort diesbezüglich erhalten, so wurdest du nicht angenommen.</strong></p>
<br><br><hr class="hrr" style="width:55%;">

</head>
<body>  

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <p>Some other text...</p>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

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

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

// 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";
}

// When the user clicks on <span> (x), close the modal
span.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>

<!-- INFOTEXT USW -->

<center>

<!-- BEWERBUNGSFORMULAR -->

<?php
// define variables and set to empty values
$name = $alter = $email = $comment = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  $name = test_input($_POST["name"]);
  $username = test_input($_POST["username"]);
  $alter = test_input ($_POST["alter"]);
  $email = test_input($_POST["email"]);
  $comment = test_input($_POST["text"]);
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

<img src="/twx3.png" style="position: absolute;margin-left: 17%;margin-top: 10%;"></img>
<img src="/annie3.png" style="position: absolute;margin-left: -22%;margin-top: 14%;"></img>
<p class="speech-bubble" id="bubbletxt"><strong>Wir warten auf Dich!</strong></p>

<h2>Bewerbungsinformationen:</h2>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
  <strong class="boxinfo">Dein Name:</strong><br> <input class="focus" placeholder="Dein Reallife-Name..." type="text" name="name">
  <br><br>
  <strong class="boxinfo">Dein Username:</strong><br> <input class="focus" placeholder="Dein Ingame-Name..." type="text" name="username">
  <br><br>
  <strong class="boxinfo">Dein Alter:</strong><br> <input class="focus" placeholder="Dein Alter..." type="text" name="alter">
  <br><br>
  <strong class="boxinfo">Deine Email-Adresse:</strong><br> <input class="focus" placeholder="Deine Email-Adresse..." type="text" name="email">
  <br><br>
<select name="ranks" style="text-align:center;">
  <!-- <option value="communitymanager">Communitymanager</option>
  <option value="moderator">Moderator</option> -->
  <option value="xler">Xler</option>
  <option value="gamex">GameX</option>
  <option value="polizist">Polizist</option>
  <option value="dj">DJ</option>
</select>
  <br><br>
  <strong class="boxinfo">Warum sollten wir Dich einstellen?:</strong><br> <textarea class="focus" placeholder="Schreibe etwas über dich..." name="text" rows="5" cols="40"></textarea>
  <br><br>
  <button class="button" href="/index" id="myBttn" style="vertical-align:middle"><span title="Sende deine Bewerbung ab">Absenden </span></button>   
  <br><br>
  <hr class="hrr" style="width:55%;">
</form>

<!-- BEWERBUNGSFORMULAR -->

</center>

<!-- FOOTER -->

<div class="footer">iFubbo &copy; 2017 ~ Powered by iFubbo-Team</div>

<!-- FOOTER -->

</body>
</html>

Alles anzeigen

Analritter von Salzgitter

Code

<a href="#" data-toggle="modal" data-target="#myModal">PopUp öffnen</a>

Code

so müsstest du den PopUp öffnen wenn das da oben dein Code ist.

trtwx

Zitat von Analritter von Salzgitter
Code
<a href="#" data-toggle="modal" data-target="#myModal">PopUp öffnen</a>

Okay, ich verstehe. Aber dann würde ja die Animation verfallen (wäre nicht weiter tragisch, aber kann man das nicht kombinieren?)

Analritter von Salzgitter

Das ist der Button, welcher das PopUp öffnet. Den kannst du via Style natürlich auch animieren (:hover) etc.

trtwx

Zitat von Analritter von Salzgitter

Das ist der Button, welcher das PopUp öffnet. Den kannst du via Style natürlich auch animieren (:hover) etc.

Ahh, okay. Ja genau das hatte ich ja versucht, was wohl so nicht hingehauen hat. Ich versuche zu lernen, klappt auch meistens ganz gut Danke für die aktive Hilfe

Analritter von Salzgitter

Zur not helfe ich gerne auch via TV.

trtwx

Ja, gerne. Aber etwas später wenn, weil ich echt müde bin.

Ich schaffe es nicht, ist auch nicht das Ergebnis bzw es öffnet sich weiterhin nichts. Der Button muss auch (soweit ich das gesehen habe) mit der id ''myBtn'' definiert werden, was aber auch nichts bringt. Wie auch immer, ich nehme gerne das TV-Angebot sofern zeitlich und willentlich passend zu einen späteren Zeitpunkt in Kauf.

Analritter von Salzgitter

Ja gehe jz pennen. Gegen Mittag / Nachmittag / abend habe ich zeit und mache dir das dann. Lösung wird dann natürlich gepostet.

trtwx

Problemlösung :

Der Code war in der Datei lediglich falsch platziert (über allen anderen codes), was das Popup blockiert hat. Habe diesen ganz unten angefügt und schon funktioniert alles wie gewünscht!

Thread kann btw geschlossen werden =)

Kpoi

Fürs nächste mal am besten deine Scripts inkl. HTML bspw. auf https://jsfiddle.net/ erfassen. Damit ist es einfacher den Code schnell und leicht zu editieren .

[HTML + JAVASCRIPT] Popup- & Weiterleitungsproblem

Jetzt mitmachen!

Benutzer online in diesem Thema