Open a modal window for authentication

1

I have in my code a conditional if that when false should open a window and request a user's authorization, password and justification.

If it does not satisfy the conditional, I will add a query in a session $_SESSION['QryAuth'] = $query so that after confirmation of the password, I will execute it and add the justification through another query.

But I can not open the modal window. I can open it automatically through buttons or links. But I wanted to call it, inside the ELSE , only when it did not satisfy me.

Can anyone help me?

PHP:

...
} else {
$_SESSION['QryAuth'] = $qry; //query que deveria ser executada
echo "<script>alert(\"Cadastro Inválido. Necessária autorização!\");</script>";
//AQUI QUERIA CHAMAR A JANELA MODAL

HTML: (Modal Window)

<div id="dialog" class="window">
    <a href="#" class="close">Fechar [X]</a><br />
    <h5>Necessário autorização do Supervisor!</h5>
    <br />  
    <table>
        <tr>
            <td>Usuário:</td>
            <td><input type="text" id="usuario" name="usuario" size="20" maxlength="20"/></td>
        </tr>       
        <tr>
            <td>Senha:</td>
            <td><input type="password" name="senha" id="senha" size="20" maxlength="20"/></td>
        </tr>       
        <tr>
            <td>Justificativa:</td>
            <td><textarea name="justificativa" id="justificativa" cols="40" rows="3"/></textarea>
            </td>
        </tr>
    </table>    
    <p><input type="submit" id="enviar_auth" name="enviar_auth" value="Autorizar"/></p> 
</div>

JS:

<script type="text/javascript">
    function open_modal( id ){
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        $('#mask').css({'width':maskWidth,'height':maskHeight});

        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
        $(id).fadeIn(2000); 
    };


    $(document).ready(function() {  

        $('a[name=modal]').click(function(e) {
            e.preventDefault();
            open_modal( $(this).attr('href') ); 
        });

        //abrindo o div#modal ao carregar a página
        //open_modal('#dialog');

        $('.window .close').click(function (e) {
            e.preventDefault();

            $('#mask').hide();
            $('.window').hide();
        });     

        $('#mask').click(function () {
            $(this).hide();
            $('.window').hide();
        });
    });
</script>
    
asked by anonymous 01.06.2017 / 18:13

1 answer

1

To perform a check on the click, you will need to include an Ajax call for verification on the server:

$('a[name=modal]').click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    $.ajax( {
        "verifica.php",
        success: function(data) { 
            if (data.erro) {
                alert(data.mensagem);
                open_modal(href); 
            }
        }
    });
});

Your code on the server, verify.php in the above case, would look like:

... } else {     $ _SESSION ['QryAuth'] = $ qry; // query that should be executed     echo json_encode (array (         'error' => true,         message = 'Invalid Registration. Required authorization! '     );     exit; }

    
01.06.2017 / 18:38