Fade and draggable popups with jQuery

Non sono un esperto di jQuery nè di javascript: diciamo che cerco di capirlo ed usarlo per i miei scopi ! Dopo svariati cut&paste dalla rete sono riuscito a creare un sistema per avere popup ajax con jQuery. Il “popup” (che in realtà è un layer) può essere spostato (draggable) ed ha effetto fade-in e fade-out…fichissimo !!!

Prendete il pacchettino con i vari scrips JS da quì: jQueryPopups.tar

Nella pagina web inserite il collegamento ai vari script js (nel mio caso nella directory js/) e CSS:

<head>

<link type=’text/css’ rel=’stylesheet’ href=’style/common.css’></link>
<script src=’js/jquery.js’ type=’text/javascript’></script>
<script src=’js/common.js’ type=’text/javascript’></script>
<script src=’js/popup.js’ type=’text/javascript’></script>

</head>
<body>
<div id=’backgroundPopup’></div>

poi inserite i div vuoti per i popups (anche solo uno):

<div id=’divPopupA’class=’Popup’><img src=’img/spinner.gif’ alt=’Please wait’/>&nbsp;Loading…</div>
<div id=’divPopupB’ class=’Popup’><img src=’img/spinner.gif’ alt=’Please wait’/>&nbsp;Loading…</div>

adesso potete usare la funzione ajaxCall che avete in common.js per richiamare il Vs popup:

<a href=’#’ onClick=”centerPopup(‘A’); loadPopup(‘A’); ajaxCall(‘myAction’,’myArgs’,’#divPopupA’); return false;”>Open popup A</a>

sempre secondo la funzione ajaxCall verrà richiamato un file ajaxCb.php con i parametri _POST indicati. Per chiudere il popup basta richiamare la funzione

<input type=’button’ onClick=”disablePopup(‘A’);”>

Come vedete è semplice ed efficace…buon divertimento !

Questo articolo è stato visto 22 volte (Oggi 1 visite)

Hai trovato utile questo articolo?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.