[RISOLTO][GDRCD 5.4] Login form in popup

[RISOLTO][GDRCD 5.4] Login form in popup postato il 15/02/2022 19:58:04 nel forum programmazione, gdrcd, open source, hosting e modificato da valthiel il 16/02/2022 12:16:53

Buonasera,
cercavo di far apparire il form di login (Nome, pass, ecc.) in una finestra popup nella home quando premo il pulsante "Login" che ho inserito.
In effetti il form di login compare ed è funzionante, ma appena clikko su uno dei campi per compilarlo il popup si chiude.
Come posso fare per far sì che il popup rimanga aperto quando ci clikko sopra per compilare il form?

Questo è il codice che sto usando:

<!DOCTYPE html>
<html>
<head>
<style>
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;

}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}

@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}

</style>
</head>
<body style="text-align:center">

<div class="popup" onclick="myFunction()"><img src="imgs/Login.png" width="70%" height="70%"><span class="popuptext" id="myPopup"><br><br>
<div class="login_input"> <span class="form_label"><label for="username"><font color="#AFD2D2"><?php echo $MESSAGE['homepage']['forms']['username'];?></font></label></span> <input type="text" id="username" name="login1" />
<div>
<div>
<span class="form_label"><label for="password"><font color="#AFD2D2"><?php echo $MESSAGE['homepage']['forms']['password'];?></font></label></span> <input type="password" id="password" name="pass1" />
</div>
<?php if ($PARAMETERS['mode']['popup_choise']=='ON'){ ?>
<br><div> <span class="form_label"><label for="allow_popup"><font color="#AFD2D2"><?php echo $MESSAGE['homepage']['forms']['open_in_popup'];?></font></label></span> <input type="checkbox" id="allow_popup" /> <input type="hidden" value="0" name="popup" id="popup">
</div>
<?php } ?>
<br><input type="submit" value="<?php echo $MESSAGE['homepage']['forms']['login'];?>" align="left"/>
</div></div></span></div></form>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");

}
</script>

</body>
</html>

Grazie in anticipo!!!

Crossout ↗
Tuffati nel mondo di Crossout, il gioco MMO d'azione post apocalittico! Costruisci le tue speciali macchine da combattimento!

Pagine → 1

16/02/2022 11:55:28

A primo acchito, credo che il problema sia derivato dal fatto che hai messo un evento onClick sull'u]intero div contenitore del [popup, nello specifico div.popup, e non solo sui bottoni che devono scatenare l'evento myFunction().

Mettendo l'onClick sull'intero div, qualsiasi cosa tu tocchi effettua il toggle del popup, chiudendolo ed aprendolo ogni volta.

Prova a mettere quell'evento solo sui bottoni che effettivamente devono eseguire quella operazione.

Kasa.