Jump to content
Fórum Script Brasil
  • 0

ABRIR POP-UP EM UM SUBMIT PHP


Guilherme Alves

Question

Galera quando vou enviar o submit do php ele aparece o pop-up rapidamente e não fica fixo na tela para exibir o resultado do cálculo. Alguém consegue me ajudar?

 

<!DOCTYPE html>
<html lang="pt=br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fundamental I e II - Cálculo de notas</title>
 
    <link rel="stylesheet" type="text/css" href="assets/css/fundamentaal.css">
</head>
<body>
    <section id="fund_I_II">
        <div class="container">
 
            <div class="box_form">
                <div class="title texto">
                    <h1>Média Ensino Fundamental I e II</h1>
                </div>
                <div class="form_inputs">
                    <form method="POST" action="">
               
                        <label>Nota de trabalho</label>
                        <input type="number" name="trab"  min="0" max="10" step=".01"></input>
 
                        <label>Nota de apostila</label>
                        <input type="number" name="apost"  min="0" max="10" step=".01"></input>
 
                        <label>Nota de prova</label>
                        <input type="number"  name="prova" min="0" max="10" step=".01"></input>
 
                        <label>Nota de trilha 1</label>
                        <input type="number" name="trilha1"  min="0" max="10 step=".01"></input>
 
                        <label>Nota de trilha 2</label>
                        <input type="number" name="trilha2"  min="0" max="10" step=".01"></input>
 
                        <input  class="enviar " type="submit" name="acao"/>
 
                    </form>
 
                        <?php
                            $trab = 0;  
                            $apost = 0;
                            $prova = 0;
                            $trilha1 =0;
                            $trilha2 = 0;
                            $med = 0;
 
                            if(isset($_POST['acao'])){
 
                            $trab = $_POST['trab'] * 8;
                            $apost = $_POST['apost'] * 2;
                            $prova = $_POST['prova'] * 6;
                            $trilha1 = $_POST['trilha1'] * 1;
                            $trilha2 = $_POST['trilha2'] * 1;
 
                            $peso1 = (($trilha1 + $trilha2) / 2) * 1;
                            $peso3 = (($trab + $apost) / 10) * 3;
                            $peso6 = $prova;
                            $med = ($peso1 + $peso3 + $peso6) / 10;
                            $rec = (($med *0.6)-6) / (0.4 * (-1));
                            }  
                        ?>
                </div>
            </div>
 
            <div id="modal-notas-aprovacao" class="modal-container">
                <div class="modal">
                    <button class="fechar">x</button>
                    <div class="aprovacao">
                        <?php
                            if(isset($_POST['acao']) && $med>=6){
                                echo 'Sua média do bimestre é: '; echo number_format($med,2); echo '<br>';
                                echo 'Você foi aprovado';
                            }
                        ?>
                    </div>
                </div>
            </div>
 
            <div class="reprovacao">
                <?php
                    if(isset($_POST['acao']) && $med < 6){
                        echo 'Sua média do bimestre é: '; echo number_format($med,2); echo '<br>';
                        echo 'Você está de RECUPERAÇÃO!';
                        echo ' É necessário tirar '.number_format($rec,2). ' na prova de recuperação.';
                    }
                ?>
            </div>  
        </div>
    </section>
 
    <script>
        function iniciaModal (modalID) {
            const modal = document.getElementById(modalID);
            console.log(modal);
            modal.classList.add('mostrar');
            modal.addEventListener('click', (e) => {
                if(e.target.id == modalID || e.target.className =='fechar') {
                    modal.classList.remove('mostrar');
                }
 
            });
        }
 
        const enviar= document.querySelector('.enviar');
        enviar.addEventListener('click', () => iniciaModal('modal-notas-aprovacao'));
    </script>
   
</body>
</html>
Edited by Guilherme Alves
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
1 hora atrás, lowys disse:

Testei aqui e a modal ficou amostrada o tempo todo na tela.
talvez seu css tenha alguma animação de show e autohide

 

Poderia me ajudar a achar essa animação, já tentei e não achei 

 

*{
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: Arial;
    background-color: #0344f7;
    overflow: hidden;
}
h1 {
    margin: 0;
    padding: 0;
}
.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;  
    align-items: center;
}
.box_form {
    width: 420px;
    background-color: #0095cf;
    border: 1px solid white ;
    border-radius: 15px;
}
.title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #FFF;
    height: 80px;
}
.form_inputs form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 330px;
}
.form_inputs label {
    text-align: center;
    color: white;
}
.form_inputs input {
    text-align: center;
    width: 200px;
    margin-top: 5px;
    padding: 5px;
    border:none;
    border-radius: 5px;
}
.form_inputs .enviar {
    width: 100px;
    margin-top: 8px;
    border-radius: 7px;
    padding: 10px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    border:0;
    background-color: green;
}
.aprovacao,
.reprovacao {
    color: #000;
    text-align: center;
}
.aprovacao {
    padding: 10px;
}
.modal-container{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0 ;
    left: 0;
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
}
.modal {
    background-color: white;
    max-width: 60%;
    min-width: 300px;
    padding: 40px;
    box-shadow: 5px 5px 6px 4px #000;
    border-radius: 10px;
    position: relative;
}
@keyframes modal {
    from {
        opacity: 0;
        transform: translate3d(0,-60px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.mostrar .modal {
    animation: modal .3s;
}
.modal-container .mostrar {
    display: flex;
}
.fechar {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background-color: white;
    font-size: 25px;
    cursor: pointer;
}
Link to comment
Share on other sites

  • 0

Entendi.
É porque você faz a matemática no php
Nem precisava. Pode ser resolvido somente com js.
mas segue sugestão:
arquivo .php
 

<?php
$trab = 0;
$apost = 0;
$prova = 0;
$trilha1 = 0;
$trilha2 = 0;
$med = 0;
$showModal = false;

if (isset($_POST['acao'])) {
    $trab = $_POST['trab'] * 8;
    $apost = $_POST['apost'] * 2;
    $prova = $_POST['prova'] * 6;
    $trilha1 = $_POST['trilha1'] * 1;
    $trilha2 = $_POST['trilha2'] * 1;

    $peso1 = (($trilha1 + $trilha2) / 2) * 1;
    $peso3 = (($trab + $apost) / 10) * 3;
    $peso6 = $prova;
    $med = ($peso1 + $peso3 + $peso6) / 10;
    $rec = (($med * 0.6) - 6) / (0.4 * (-1));

    $showModal = true;
}
?>
<!DOCTYPE html>
<html lang="pt=br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fundamental I e II - Cálculo de notas</title>
    <link rel="stylesheet" type="text/css" href="assets/css/fundamentaal.css">
</head>

<body>
    <section id="fund_I_II">
        <div class="container">

            <div class="box_form">
                <div class="title texto">
                    <h1>Média Ensino Fundamental I e II</h1>
                </div>
                <div class="form_inputs">
                    <form method="POST" action="">

                        <label>Nota de trabalho</label>
                        <input type="number" name="trab" required autofocus min="0" max="10" step=".01"></input>

                        <label>Nota de apostila</label>
                        <input type="number" name="apost" required min="0" max="10" step=".01"></input>

                        <label>Nota de prova</label>
                        <input type="number" name="prova" required min="0" max="10" step=".01"></input>

                        <label>Nota de trilha 1</label>
                        <input type="number" name="trilha1" required min="0" max="10 step=" .01"></input>

                        <label>Nota de trilha 2</label>
                        <input type="number" name="trilha2" required min="0" max="10" step=".01"></input>

                        <input class="enviar " type="submit" name="acao" />

                    </form>
                </div>
            </div>

            <div id="modal-notas-aprovacao" class="modal-container<?= $showModal ? ' mostrar' : '' ?>">
                <div class="modal">
                    <button class="fechar">x</button>
                    <div class="aprovacao">
                        <?php
                        if (isset($_POST['acao']) && $med >= 6) {
                            echo 'Sua média do bimestre é: '
                                . number_format($med, 2)
                                . '<br>'
                                . 'Você foi aprovado';
                        }
                        ?>
                    </div>

                    <div class="reprovacao">
                        <?php
                        if (isset($_POST['acao']) && $med < 6) {
                            echo 'Sua média do bimestre é: '
                                . number_format($med, 2)
                                . '<br>'
                                . 'Você está de RECUPERAÇÃO!'
                                . ' É necessário tirar ' . number_format($rec, 2) . ' na prova de recuperação.';
                        }
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        const modalID = 'modal-notas-aprovacao'
        const modal = document.getElementById(modalID);
        modal.addEventListener('click', (e) => {
            if (e.target.id == modalID || e.target.className == 'fechar') {
                modal.classList.remove('mostrar');
            }

        });
    </script>

</body>

</html>

Arquivo .css
 


*{
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  background-color: #0344f7;
  overflow: hidden;
}
h1 {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;
}
.box_form {
  width: 420px;
  background-color: #0095cf;
  border: 1px solid white ;
  border-radius: 15px;
}
.title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #FFF;
  height: 80px;
}
.form_inputs form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 330px;
}
.form_inputs label {
  text-align: center;
  color: white;
}
.form_inputs input {
  text-align: center;
  width: 200px;
  margin-top: 5px;
  padding: 5px;
  border:none;
  border-radius: 5px;
}
.form_inputs .enviar {
  width: 100px;
  margin-top: 8px;
  border-radius: 7px;
  padding: 10px;
  color: white;
  font-weight: bold;
  font-size: 16px;
  border:0;
  background-color: green;
}
.aprovacao,
.reprovacao {
  color: #000;
  text-align: center;
}
.aprovacao {
  padding: 10px;
}
.modal-container{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0 ;
  left: 0;
  z-index: 2000;
  display: none;
  justify-content: center;
  align-items: center;
}
.modal {
  background-color: white;
  max-width: 60%;
  min-width: 300px;
  padding: 40px;
  box-shadow: 5px 5px 6px 4px #000;
  border-radius: 10px;
  position: relative;
}
@keyframes modal {
  from {
      opacity: 0;
      transform: translate3d(0,-60px, 0);
  }
  to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
  }
}
.mostrar .modal {
  animation: modal .3s;
}
.modal-container.mostrar {
  display: flex;
}
.fechar {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background-color: white;
  font-size: 25px;
  cursor: pointer;
}

 

Link to comment
Share on other sites

  • 0
19 horas atrás, wash disse:

Entendi.
É porque você faz a matemática no php
Nem precisava. Pode ser resolvido somente com js.
mas segue sugestão:
arquivo .php
 

<?php
$trab = 0;
$apost = 0;
$prova = 0;
$trilha1 = 0;
$trilha2 = 0;
$med = 0;
$showModal = false;

if (isset($_POST['acao'])) {
    $trab = $_POST['trab'] * 8;
    $apost = $_POST['apost'] * 2;
    $prova = $_POST['prova'] * 6;
    $trilha1 = $_POST['trilha1'] * 1;
    $trilha2 = $_POST['trilha2'] * 1;

    $peso1 = (($trilha1 + $trilha2) / 2) * 1;
    $peso3 = (($trab + $apost) / 10) * 3;
    $peso6 = $prova;
    $med = ($peso1 + $peso3 + $peso6) / 10;
    $rec = (($med * 0.6) - 6) / (0.4 * (-1));

    $showModal = true;
}
?>
<!DOCTYPE html>
<html lang="pt=br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fundamental I e II - Cálculo de notas</title>
    <link rel="stylesheet" type="text/css" href="assets/css/fundamentaal.css">
</head>

<body>
    <section id="fund_I_II">
        <div class="container">

            <div class="box_form">
                <div class="title texto">
                    <h1>Média Ensino Fundamental I e II</h1>
                </div>
                <div class="form_inputs">
                    <form method="POST" action="">

                        <label>Nota de trabalho</label>
                        <input type="number" name="trab" required autofocus min="0" max="10" step=".01"></input>

                        <label>Nota de apostila</label>
                        <input type="number" name="apost" required min="0" max="10" step=".01"></input>

                        <label>Nota de prova</label>
                        <input type="number" name="prova" required min="0" max="10" step=".01"></input>

                        <label>Nota de trilha 1</label>
                        <input type="number" name="trilha1" required min="0" max="10 step=" .01"></input>

                        <label>Nota de trilha 2</label>
                        <input type="number" name="trilha2" required min="0" max="10" step=".01"></input>

                        <input class="enviar " type="submit" name="acao" />

                    </form>
                </div>
            </div>

            <div id="modal-notas-aprovacao" class="modal-container<?= $showModal ? ' mostrar' : '' ?>">
                <div class="modal">
                    <button class="fechar">x</button>
                    <div class="aprovacao">
                        <?php
                        if (isset($_POST['acao']) && $med >= 6) {
                            echo 'Sua média do bimestre é: '
                                . number_format($med, 2)
                                . '<br>'
                                . 'Você foi aprovado';
                        }
                        ?>
                    </div>

                    <div class="reprovacao">
                        <?php
                        if (isset($_POST['acao']) && $med < 6) {
                            echo 'Sua média do bimestre é: '
                                . number_format($med, 2)
                                . '<br>'
                                . 'Você está de RECUPERAÇÃO!'
                                . ' É necessário tirar ' . number_format($rec, 2) . ' na prova de recuperação.';
                        }
                        ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        const modalID = 'modal-notas-aprovacao'
        const modal = document.getElementById(modalID);
        modal.addEventListener('click', (e) => {
            if (e.target.id == modalID || e.target.className == 'fechar') {
                modal.classList.remove('mostrar');
            }

        });
    </script>

</body>

</html>

Arquivo .css
 


*{
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  background-color: #0344f7;
  overflow: hidden;
}
h1 {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;
}
.box_form {
  width: 420px;
  background-color: #0095cf;
  border: 1px solid white ;
  border-radius: 15px;
}
.title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: #FFF;
  height: 80px;
}
.form_inputs form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 330px;
}
.form_inputs label {
  text-align: center;
  color: white;
}
.form_inputs input {
  text-align: center;
  width: 200px;
  margin-top: 5px;
  padding: 5px;
  border:none;
  border-radius: 5px;
}
.form_inputs .enviar {
  width: 100px;
  margin-top: 8px;
  border-radius: 7px;
  padding: 10px;
  color: white;
  font-weight: bold;
  font-size: 16px;
  border:0;
  background-color: green;
}
.aprovacao,
.reprovacao {
  color: #000;
  text-align: center;
}
.aprovacao {
  padding: 10px;
}
.modal-container{
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0 ;
  left: 0;
  z-index: 2000;
  display: none;
  justify-content: center;
  align-items: center;
}
.modal {
  background-color: white;
  max-width: 60%;
  min-width: 300px;
  padding: 40px;
  box-shadow: 5px 5px 6px 4px #000;
  border-radius: 10px;
  position: relative;
}
@keyframes modal {
  from {
      opacity: 0;
      transform: translate3d(0,-60px, 0);
  }
  to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
  }
}
.mostrar .modal {
  animation: modal .3s;
}
.modal-container.mostrar {
  display: flex;
}
.fechar {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background-color: white;
  font-size: 25px;
  cursor: pointer;
}

 

Muito obrigado mano, funcionou perfeitamente. Obrigado pela ajuda!!!!!!! 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.9k
×
×
  • Create New...