Popup associato ad una parola

[azcoit]

Ciao a tutti,

come da esempio nel link seguente,

http://www.artedelweb.it/wp-content/..._popup_dialog/

quando clicco sul bottone, si apre naturalmente la popup,

come devo fare per farla aprire, associando la funzione ad una parola di un testo?

per esempio:

Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.

se volessi che la mia finestra popup si aprisse al click del mouse sulla parola "STAMPA", come

devo fare?

Grazie a tutti i partecipanti che mi daranno un piccolo aiuto!

[Xinod]

Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della <span id="cliccaqui">stampa</span>.

[azcoit]

Grazie Xinod,

domani provo questa soluzione, poi se ti va ti aggiorno!!!

[azcoit]

Grazie Xinod,

il tuo aiuto mi è stato prezioso, ho risolto il problema!

[Xinod]

no problem
ciao

[azcoit]

Vorrei porti/vi un ulteriore domanda,

il problema di prima l'ho risolto, ho posizionato la mia popup al centro dello schermo,

ma andando a provare le varie risoluzioni (1600x900-1024x768 ecc), la popup non mi si adatta.

come posso risolvere questa cosa?

Grazie in anticipo!

[Xinod]

cosa ti aspetti? non c'e' niente ne' nello script ne' nel css che faccia adattare automaticamente quella "popup" alle dimensioni della viewport
(se e' quello a cui fai riferimento al cambio di risoluzione)

[azcoit]

Hai ragione Xinod,

avevo stampato delle foto con PS, ma erano troppo grandi per essere caricate,

adesso posto lo script e il css!

*******************************{script}*********** ********************

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#pop").click(function(){

$(".messaggio").fadeIn("slow");
$("#nero").css("display", "block");

$("#nero").click(function(){
$("#nero").css("display", "none");
$(".messaggio").fadeOut("slow");
});
$("#chiudi").click(function(){
$("#nero").css("display", "none");
$(".messaggio").fadeOut("slow");
});

});
});
</script>

***************************CSS******************** ********************

/* Alcune righe di codice di convenzione */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}
/* Ci servirà per oscurare la pagina */
#nero{
/* Imposto il colore nero */
background-color:#000000;
/* Imposto come puntatore la manina */
cursorointer;
/* Imposto i valori di altezza e larghezza a 100% */
height:100%;
width:100%;
/* Ci servirà in modo tale che non ci siano margini */
left:0;
top:0;
/* Impostiamo come posizione la fissa */
position:fixed;
/* Aggiungiamo i codice per opacizzare lo sfondo. */
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);
/* E' utile nel caso in cui ci siano altri oggetti in posizione assoluta o fissa */
z-index:1000;
/* Lo rendiamo non visibile */
display:none;
}

/* Questo sarà il nostro popup */
.messaggio{
/* Impostiamo il bianco come colore di sfondo e creiamo un piccolo bordo */
background-color:#FFFFFF;
border:3px solid #AAAAAA;
/* Impostiamo un leggero margine interno */
padding:5px;
/* Impostiamo la posizione come fissa. Ci servirà in modo tale che il popup segua lo scrolling della pagina */
position:fixed;
/* Impostiamo lo z-index come 1001. Lo z-index è una sorta di gestore di livelli. Chi avrà il numero maggiore si troverà davanti a chi ha numero minore. Facile no? */
z-index:1001;
/* Rendiamo il popup non visibile */
display: none;
/* Impostiamo la grandezza del box. Ci servirà in quanto così possiamo facilmente impostare il box centrato nella pagina */
width: 350px;
height: 350px;
/* Impostiamo i valori di top e left a 50% */
left: 50%;
top: 50%;
/* Il margin left e top dovrà essere pari alla metà delle dimensioni del box. Ci servirà per centrare il box */
margin-left: -175px;
margin-top: -175px;
text-align:center;
/* Impostiamo un'ombra con CSS3 */
-webkit-box-shadow: 0px 0px 10px #525252;
-moz-box-shadow: 0px 0px 10px #525252;
}

[Xinod]

scusa, lo script lo vedo dalla pagina che hai linkato nella domanda,
ma ancora non e' chiaro cosa ti aspetti che faccia

questo popup dovrebbe ridimensionarsi in base al contenuto?

[azcoit]

Perdonami ma non mi ero spiegato bene,

è esatto quello che hai intuito, dovrebbe ridimensionarsi in base al contenuto, perche l'ho

centrato in un layout alla risoluzione 1600x900 (risoluzione del mio pc), ma quando cambio la

risoluzione (1024x768), il popup rimane sempre al centro, ma si sposta verso l'alto.

Con parole non so se è chiaro, ma ho fatto due immagini di esempio, purtroppo non riesco a

spedirle in quanto sono pesanti.

grazie.