Popup con grafica personalizzata

**Iron83** · 21-10-2009, 21:55

Ciao ragazzi,

mi ritrovo a scontrarmi

con un problemino.
Ho bisogno di un popup che all'apertura graficamente appaia come un div stile fumetto, cioè completamente personalizzato senza barra degli indirizzi, toolbar etc. completamente spoglia.

Ho provato a creare un div con lo z-index ma niente, ho provato a creare un div con lo show/hide ma purtroppo ho bisogno di passare delle variabili tramite un form per eseguire controlli ed inserimenti in un database (MDB con ASP).

In giro non ho trovato niente, potete darmi una manina??

Grazie

**guderian** · 22-10-2009, 18:21

ciao, se ho capito bene, se crei un div con z-index, dentro ci puoi mettere quello che vuoi, un form da spedire con submit oppure anche con una chiamata ajax.

ci sono dei framework che ti offrono questo genere di elementi già fatti, sempre che non abbia bisogno di eccessive personalizzazioni.

**Iron83** · 22-10-2009, 19:21

Ciao guderian,

in pratica il form sarebbe fuori dal popup, quindi lo richiamerebbe. Una volta aperto il popup restituisce solamente risposte dettate dai controlli (inserimento in db, controllo di campi già esistenti etc.)

**Iron83** · 26-10-2009, 11:08

Proprio nessuno riesce ad aiutarmi??

**cavicchiandrea** · 26-10-2009, 13:32

Spunti:
http://javascript.html.it/articoli/l...on-javascript/
http://javascript.html.it/script/ved...tip-a-fumetto/

**guderian** · 26-10-2009, 19:24

se il popup è un div con z-index, non c'è problema, anche se il form lo hai aperto altrove, basta che il tag di chiusura del form venga dopo gli input presenti nel tuo div.
altrimenti crei i campi input nel form principale, li metti come hidden e poi con javascript vai ad assegnare i valori immessi nel div a tooltip al form principale (meglio optare per la prima opzione cmq è + semplice)
quindi

codice:

<form name="nomeform" action="">
.....

  <div id="layer_tooltip">
      <input .....>
      <select ....></select>
   </div>

.....
</form>

se invece il popup è una nuova istanza window, puoi usare la proprietà window.opener x rintracciare la finestra che ha generato il popup, dopodichè la scorri con il consueto dom

codice:

window.opener.forms[nomedelform]

è il form della finestra principale

**Iron83** · 29-10-2009, 16:47

Ciao ragazzi,

intanto grazie per le risposte.
Il mio problema non è creare un div a scomparsa con grafica personalizzata (utilizzo jquery). Passo alla spiegazione dettagliata dell'iscrizione alla newsletter:

Ho una default.asp, nella colonna di sinistra ho un input type="text" (dove si immette un indirizzo email), e due link: Cancellami - Iscrivimi, il tutto contenuto in un form.

Il fatto è che dopo il click su uno dei due link verrà restituita all'interno della div con show/hide una risposta generata da condizioni. Il tutto ovviamente verrà generato da delle condizioni create sempre tramite ASP.

La domanda è questa:

Solitamente quando si fa il submit ad un form nella action si inserisce il link di una pagina che elabora i dati, io ho bisogno di elaborare tutto nella stessa pagina e dare delle risposte in base all'azione all'interno di un div con show/hide.

Spero di essere stato il più chiaro possibile

**guderian** · 29-10-2009, 19:09

vediamo se ho capito bene:
vuoi submittare il form senza ricaricare la pagina, giusto ?
se si, puoi farlo via ajax. se usi già un framework javascript, utilizza i metodi ajax già pronti.
l'esito dell'operazione fatta dalla pagina chiamata la innesti in un div nella pagina chiamante

crei oggetto Ajax (qui io ho usato le YUI di Yahoo, ma è uguale, ovviamente devi includere nel <head></head> della pagina i relativi file .js):

codice:

<script>
var AjaxObject = {

	handleSuccess:function(o){
		this.processResult(o);
		sDiv.innerHTML = ' '; /* svuota contenuto precedente */
		sDiv.innerHTML += o.responseText;
	},

	handleFailure:function(o){
		// Failure handler
		sDiv.innerHTML = ' '; /* svuota contenuto precedente */
		sDiv.innerHTML += o.responseText;
	},

	processResult:function(o){
		// This member is called by handleSuccess
	},
	
	/**
	*	riceve parametro per connessione
	*	pubblica contenuto ritornato su response_div
	*/
	startRequest:function(paramString, response_div ) {
		stamp = new Date();
		timestamp = stamp.getTime();
		sDiv = document.getElementById(response_div);
		sUrl = "/pagina_da_chiamare.asp?" + paramString + "&ts=" + timestamp;
		
		action = returnAction;
               /**
                * esegue la chiamata
                */
	   YAHOO.util.Connect.asyncRequest('GET', sUrl, callback );
	}

};

</script>

la parte html (i due bottoni subscribe e unsubscribe aggiungono un parametro alla stringa da passare, corrispondente all'azione che vuoi compiere sul lato server (iscrivi o elimina):

codice:

<form name="form_email">
<input type="text" name="email"> Inserisci indirizzo email
<input type="button" name="subscribe" onclick="AjaxObject.startRequest('email=' + document.forms[form_email].email.value+'&action=subscibe' , 'risposta');">
<input type="button" name="unsubscribe" onclick="AjaxObject.startRequest('email=' + document.forms[form_email].email.value+'&action=unsubscribe' , 'risposta');">
</form>

nel mezzo la tua pagina pagina_da_chiamare.asp prenderà i due parametri (in questo caso passati via GET, ma anche POST va bene)
email
action
e ci farà quello che deve fare e ritornando una risposta. la cosa + semplice è mandare un output html già formattato, così ajax non fa altro che mettere l'output nel div indicato, ma puoi fare tutto quello che vuoi lato client...

qui pubblico il risultato dell'operazione:

codice:

<div id="risposta"></div>

spero fosse quello che cercavi, ammetto di aver scritto un po' in fretta e sul generico.
eventualmente se manca qualcosa posta il codice e vediamo nel caso specifico

**Iron83** · 02-11-2009, 13:59

Ciao Guderian,

ho provato un popup in dhtml l'unico problema è che non riesco a capire come farlo richiamare dal form, mi spiego:

Ho questa funzione:

Codice PHP:


var dragapproved=false

var minrestore=0

var initialwidth,initialheight

var ie5=document.all&&document.getElementById

var ns6=document.getElementById&&!document.all



function iecompattest(){

return (document.compatMode!="BackCompat")? document.documentElement : document.body

}



function drag_drop(e){

if (ie5&&dragapproved&&event.button==1){

document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx+"px"

document.getElementById("dwindow").style.top=tempy+event.clientY-offsety+"px"

}

else if (ns6&&dragapproved){

document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx+"px"

document.getElementById("dwindow").style.top=tempy+e.clientY-offsety+"px"

}

}



function initializedrag(e){

offsetx=ie5? event.clientX : e.clientX

offsety=ie5? event.clientY : e.clientY

document.getElementById("dwindowcontent").style.display="none" //extra

tempx=parseInt(document.getElementById("dwindow").style.left)

tempy=parseInt(document.getElementById("dwindow").style.top)



dragapproved=true

document.getElementById("dwindow").onmousemove=drag_drop

}



function loadwindow(url,width,height){

if (!ie5&&!ns6)

window.open(url,"","width=width,height=height,scrollbars=1")

else{

document.getElementById("dwindow").style.display=''

document.getElementById("dwindow").style.width=initialwidth=width+"px"

document.getElementById("dwindow").style.height=initialheight=height+"px"

document.getElementById("dwindow").style.left="150px"

document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30+"px" : iecompattest().scrollTop*1+30+"px"

document.getElementById("cframe").src=url

}

}



function maximize(){

if (minrestore==0){

minrestore=1 //maximize window

document.getElementById("maxname").setAttribute("src","restore.gif")

document.getElementById("dwindow").style.width=ns6? window.innerWidth-20+"px" : iecompattest().clientWidth+"px"

document.getElementById("dwindow").style.height=ns6? window.innerHeight-20+"px" : iecompattest().clientHeight+"px"

}

else{

minrestore=0 //restore window

document.getElementById("maxname").setAttribute("src","max.gif")

document.getElementById("dwindow").style.width=initialwidth

document.getElementById("dwindow").style.height=initialheight

}

document.getElementById("dwindow").style.left=ns6? window.pageXOffset+"px" : iecompattest().scrollLeft+"px"

document.getElementById("dwindow").style.top=ns6? window.pageYOffset+"px" : iecompattest().scrollTop+"px"

}



function closeit(){

document.getElementById("dwindow").style.display="none"

}



function stopdrag(){

dragapproved=false;

document.getElementById("dwindow").onmousemove=null;

document.getElementById("dwindowcontent").style.display="" //extra

}

Iframe

Codice PHP:


<div id="dwindow" style="position:absolute;background-color:#EBEBEB;cursor:hand;left:0px;top:0px;display:none" onMousedown="initializedrag(event)" onMouseup="stopdrag()" >

<div align="right" style=" width: 100%;">[img]immagini/chiudi.jpg[/img]</div>

<div id="dwindowcontent" style="height:100%;">

<iframe id="cframe"   width="100%" height="100%"></iframe>

</div>

</div>

e questo form

Codice PHP:


<form  action="newsletter.asp"  method="post" id="newsletter" name="newsletter">

     <table cellpadding="0" width="220"cellspacing="0" border="0"  style="border-bottom: 1px dotted #cccccc; margin-bottom: 10px;">

            <tr>

                <td width="20"style="padding-left: 5px;">Email:</td>

                <td width="50" align="right">[img]immagini/input_left.gif[/img]</td>

                <td width="100"><input name="email" class="input-all"  type="text"></td>

                <td width="50">[img]immagini/input_right.gif[/img]</td>

            </tr>

        </table>

        <table>

            <tr>

                <td><input name="operazione" type="radio" value="cancellami"></td>

                <td>Cancellami</td>

                <td><input name="operazione" type="radio" value="iscrivimi"></td>

                <td>Iscrivimi</td>

                <td align="right" style="padding-top: 5px; padding-bottom: 5px;">[url="javascript:loadwindow('newsletter.asp',240,240)"]Invia[/url]</td>

                            </tr>

        </table>

    </form>

In questa situazione quando effettuo un inserimento (iscrizione - cancellazione - campi vuoti) apre la pagina newsletter.asp senza passare dal popup. Io ho bisogno di restituire tutti i risultati dei controlli all'interno di questo popup e non in un'altra pagina. Se inserisco nella action del form questa action="javascript:loadwindow('newsletter.asp',240 ,240)" il popup lo visualizzo ma non mi effettua tutti i controlli, quindi deduco che non passi il value degli input. Come posso fare??

**guderian** · 03-11-2009, 17:47

ciao, sintetizzando lo schema tu hai :
1. una pagina con i campi form
2. una pagina che elabora i dati inseriti e restituisce una risposta
3. una pagina che contiene e attiva il div popup (iframe o ajax)

sarebbe + indicato che la 1 e la 3 fossero la stessa, ma nn è necessario.
Quindi tu devi
a. raccogliere i dati del form
b. inviarli alla pagina 2
b. attivare il popup con la risposta ricevuta

a me questo schema sembra perfetto per ajax, ma vedi un po' tu.
usando il tuo esempio :

Se inserisco nella action del form questa action="java-script:loadwindow('newsletter.asp',240,240)" il popup lo visualizzo ma non mi effettua tutti i controlli, quindi deduco che non passi il value degli input. Come posso fare??

all'url devi aggiungere la stringa con i parametri:

codice:

('newsletter.asp?email=afafkabkbakf&action=subscribe',240,240)

il tuo problema a questo punto è raccogliere i dati del form, dal momento che NON devi fare un submit del form ma stai caricando una pagina in un iframe.
hai 1 solo form e 2 parametri da passare, è semplice.

codice:

function getDatiForm( id_form )
{
	var mioForm= document.getElementById(id_form);
	var str_parametri = 'newsletter.asp?email=' + mioForm.email.value + '&operazione=' + mioForm.operazione.value;  
	return str_parametri;  
}

infine, cambia l'azione associata al link 'Iscrivimi', non + un submit del form, ma richiami questa funzione appena creata:

codice:

a OnClick="newsletter.submit()" href="javascript:loadwindow(getDatiForm( id_form ),240,240)">Invia</a>

dove 'id_form' è l'attributo ID del tuo form.
puoi anche passare l'attributo name del tuo form, nel qual caso modifica la prima riga della funzione con

codice:

var mioForm= document.forms[id_form];

una nota: attenzione all iframe e alla tua DTD, il tag iframe non è supportato nei document type HTML 4.1 Strict DTD e XHTML 1.0 Strict DTD (ti verrebbe segnalato come errore in caso di validazione della pagina)

Discussione: Popup con grafica personalizzata

Strumenti discussione

Ricerca discussione

Visualizza

Popup con grafica personalizzata

Permessi di invio