Ir para conteúdo
Fórum Script Brasil
  • 0

ABRIR POP-UP EM UM SUBMIT PHP

Guilherme Alves

Perguntado por Guilherme Alves,

 Share

Pergunta

Guilherme Alves

Guilherme Alves

Postado
Postado (editado)

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>
Editado por Guilherme Alves
Link para o comentário
Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

  • 0
Guilherme Alves

Guilherme Alves

Postado
  • Autor
Postado
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 para o comentário
Compartilhar em outros sites
  • 0
wash

wash

Postado
Postado

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 para o comentário
Compartilhar em outros sites
  • 0
Guilherme Alves

Guilherme Alves

Postado
  • Autor
Postado
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 para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,1k
×
×
  • Criar Novo...