<form id="formulario_comerciante" action="" method="post">

<input type="text" id="nombre_del_comerciante" required="required" size="55" /><input type="text" id="cif_del_comerciante" required="required" size="55" />
<input type="text" id="password_comerciante" required="required" size="55" />
<input type="text" id="repetir_password_comerciante" required="required" size="55" />
<input type="text" id="nombre_de_la_empresa" required="required" size="55" />
<input type="text" id="direccion_comerciante" required="required" size="55" />
<input type="button" id="abrir_popup_foto" />
<input type="image" src="../Landing/boton_confirmar.png" name="confirmar_registro_cliente" value="CONFIRMAR" style="color:white; font-weight:bold; margin-left:700px;" required="required" />
                        
                        </form>

<div id="foto" style="display: none;">
                                            <div class="contenido-foto">
                                                <div class="cerrar_popup_foto"><a href="#" id="cerrar_popup_foto">X</a></div>
                                                <?php include("../subir imagenes/upload_crop_v1.2.php"); ?>
                                            </div>
                                        </div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#abrir_popup_foto').click(function(){
        $('#foto').fadeIn('slow');
    });

    $('#cerrar_popup_foto').click(function(){
        $('#foto').fadeOut('slow');
    });
});
</script>

<style>

#foto {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;
}

.contenido-foto {
    margin:0px auto;
    margin-top:50px;
    padding:10px;
    width:500px;
    min-height:250px;
    border-radius:4px;
    background-color:#FFFFFF;
    box-shadow: 0 2px 5px #666666;
}

.cerrar_popup_foto {
    position:relative;
    left:480px;
}

</style>