Open a modal window for authentication

Question

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

If you do not meet the condition, I will add a query in a session $_SESSION['QryAuth'] = $query so that after confirmation of the password, I will run it and add the justification through another query.

But I can’t open the modal window. I can open it automatically through buttons or links. But I wanted to call it, inside the ELSE, only when I’m not satisfied.

Someone can 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: (Janela Modal)

<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>

Answer 1

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

$('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 server code, check.php in the above case, it would look like:

... } Else { $_SESSION['Qryauth'] = $qry; //query that should be executed echo json_encode(array( 'error'=>true, message='Invalid Registration. Authorization required! ' ); Exit; }