Come chiudere un div effettuando un click esterno al div stesso

**gabrieletaibi** · 21-08-2015, 17:04

Salve, spiego subito il mio problema:

nella mia HOME ho inserito un button che permette all'utente di modificare la propria photo, per far ciò vorrei fare in modo che al click del button si apra un div centrato alla pagine in cui verrà caricato il form html per caricare e modificare la foto:

codice HTML:

<div id="topBar" > <input type="button" value="photo" onclick="javascript:load_photo()"></div>
<div id ="content"> </div>
<script>
     function load_photo(){
document.getElementById("content").innerHTML='<object type="text/html" 
data="../try_musicbox/try_div.html" style="display: inline-block; position: fixed; top: 0; bottom: 0; left: 0; right: 50%; width: 300px; height: 200px;
 margin: auto; border: 1px; background-color: #363232;" ></object>'; 
     }
</script>

tramite questo script riesco facilmente a far apparire il div con la pagine html "try_div,html" per inserire il form. al submit del form la photo viene processata con una pagina php. L'unico problema rimasto è la chiusura del div a fine procedura, quindi quando la foto viene infine caricata sul server locale tramite la pagina php.
Ovviamente tutta questa procedura non deve intaccare la pagina HOME che dovrebbe continuare a processare senza intoppi anche mentre si modifica la foto.
Ho provato vari script per chiudere il div ma con scarsi risultati, quindi mi chiedevo se qualcuno di voi potesse darmi qualche consiglio. il top sarebbe dare la possibilità all'utente di chiudere il div semplicemente cliccando all'esterno di esso, quindi nella home(anche per questo caso i miei tentativi sono stati vani).
Spero di esser stato chiaro. Grazie in anticipo

**cavicchiandrea** · 21-08-2015, 17:34

Non sapendo come funziona object prova a fine processo della pagina php a scrivere (fuori dal codice php dopo il tag di chiusura php ?>)
<script>document.getElementById("content").innerHT ML='';</script> se non funziona prova mettere le pagine in questione online riportando qui il link forse vendendo il processo in azione si trovano altre strade

**gabrieletaibi** · 23-08-2015, 15:16

purtroppo la soluzione che mi hai consigliato non funziona e non riesco al momento a metterlo online, cerco di postare tutto il codice necessario così forse riesci a farti un'idea.

prima di tutto nella home ho questo button che al click apre un div sopra gli altri:
"homt.html"

codice HTML:

<div id="topBar" > <input type="button" value="photo" onclick="javascript:load_photo()"></div>
<div id ="content"> </div>
<script>
function load_photo(){
document.getElementById("content").innerHTML='<object type="text/html" data="../try_musicbox/try_div.html" style="display: inline-block; position: fixed; top: 0; bottom: 0; left: 0; right: 50%; width: 300px; height: 200px; margin: auto; border: 1px; background-color: #363232;" ></object>'; 
}
</script>

tramite l'object nel div compare il form per il caricamento dell'immagine dal pc:
"try_div.html"

codice HTML:

<body>
<div style="display: inline-block; position: fixed; top: 0; bottom: 0; left: 0; right: 50%; width: 300px; height: 200px; margin: auto; border: 1px; background-color: #363232;">
<form action="../uploadPhoto/upload_photo.php" method="post"enctype="multipart/form-data">

<label for="file"><p align="Center" >Filename:</p></label>
<input type="file" name="file" id="file"><br><br>
<input type="submit" name="submit" value="Submit">
</form>
</div>
</body>

infine al submit del form passo alla pagina php che elabora il tutto ed inserisce l'immagine nella cartella designata:
"upload_photo,php"

Codice PHP:


<?php
function logFile($t){
        $data = date("d-m-y");
        $ora = date("G:i:s");

        $testo = $data." ".$ora;
        $testo = $testo."       ".$t."\n";

        $var=fopen("../log/$_POST[nomelocale]-logger.txt","a");
        fwrite($var,$testo);
        fclose($var);
}


session_start();
//log-file -- Session_Start()
logFile("Photo.Session_Start --> [$_SESSION[nomelocale]]]");


$nomelocale = $_SESSION['nomelocale'];
$_SESSION['nomelocale'] = $nomelocale;

$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 20000)
&& in_array($extension, $allowedExts))
{
//log-file -- ifFileExtension
logFile("Photo.ifFileExtension --> [OK]");

if ($_FILES["file"]["error"] > 0)
{
//log-file -- ifFileExtensionNO
logFile("Photo.ifFileExtension --> [NO]");
echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
}
else
{
//log-file -- ifFileExtensionOK
logFile("Photo.ifFileExtension --> [OK]");
echo "Upload: " . $_FILES["file"]["name"] . "<br>";
echo "Type: " . $_FILES["file"]["type"] . "<br>";
echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

if (file_exists("../uploadPhoot/photo_local/" . $nomelocale))
{
//log-file -- FileExist
logFile("Photo.IfFileExist_unlinkphoto --> [OK]");
@unlink("../uploadPhoto/photo_local/" . $nomelocale);
}
//log-file -- MoveUploadedFile
logFile("Photo.MoveUploadedFile --> [OK]");
move_uploaded_file($_FILES["file"]["tmp_name"],
"../uploadPhoto/photo_local/" . $nomelocale);
//echo "Stored in: " . "photo/" . $_POST["name"];
echo "Stored in: " . "../uploadPhoto/photo_local/" . $nomelocale;
//log-file -- StoredIn
logFile("Photo.StoredIn --> [OK]");
}
}
else
{
//log-file -- error
logFile("Photo.UploadError --> [OK]");
echo "Invalid file";
}
?>

Tutto il procedimento sembra funzionare, manca soltanto la chiusura del div aperto all'inizio.

**cavicchiandrea** · 23-08-2015, 15:26

Non sapendo come opera object diventa difficile dare indicazioni senza un link alla pagina io non so che dirti.

**zacca94** · 23-08-2015, 15:27

// ot per motivi di sicurezza edita
$var=fopen("../log/$_POST[nomelocale]-logger.txt","a");

con

$var=fopen("../log/".basename(str_replace("\0", "", $_POST["nomelocale"]))."-logger.txt","a");

**badaze** · 23-08-2015, 15:28

Cosa intendi con chiudere il div ?
Farlo sparire dalla videata ?

**gabrieletaibi** · 23-08-2015, 16:30

Originariamente inviata da zacca94

// ot per motivi di sicurezza edita
$var=fopen("../log/$_POST[nomelocale]-logger.txt","a");

con

$var=fopen("../log/".basename(str_replace("\0", "", $_POST["nomelocale"]))."-logger.txt","a");

Grazie per la correzione.

Comunque si deve scomparire totalmente dalla home

**badaze** · 23-08-2015, 19:02

Un div a scomparsa non andrebbe ? Ti crei una classe css i cui parametri di posizionamento sono fuori dalla pagina. Poi quando lo vuoi fare apparire metti une classe che visualizza il div dove vuoi. Poi quando premi il pulsante rimetti la classe iniziale.

**gabrieletaibi** · 24-08-2015, 16:31

Sto provando adesso semplicemente tramite le funzioni javascript:

codice:

function show(target) {
            document.getElementById(target).style.display = 'block';
        }

        function hide(target) {
            document.getElementById(target).style.display = 'none';
        }

codice HTML:

<body>
        <a href="#" onclick="show('mydiv')">Open DIV</a>
<div id="mydiv">
    <div id="mydiv-container">
        <div id="mydiv-content">
<form action="../uploadPhoto/upload_photo.php" method="post"enctype="multipart/form-data">

<label for="file"><p align="Center" >Filename:</p></label>
<input type="file" name="file" id="file"><br><br>
<input type="submit" name="submit" value="Submit">
</form>
<h1>Here's The Popup!</h1>

            <br>Click the link to close.
            <br>
<a href="#" onclick="hide('mydiv')">Close</a>

        </div>
    </div>
</div>
    </body>

Solo che rimane il problema che al submit del form mi carica la pagina php nella home principale e non soltanto all'interno del div.
Come potrei fare per risolvere questo problema?

**cavicchiandrea** · 24-08-2015, 17:16

nel div metti un iframe

Discussione: Come chiudere un div effettuando un click esterno al div stesso

Strumenti discussione

Ricerca discussione

Visualizza

Come chiudere un div effettuando un click esterno al div stesso

Permessi di invio