Pop-over

Può servire, a volte, inserire nel proprio sito un pop-over che, al caricamento della pagina, porti il visitatore a concentrare l'attenzione su un breve messaggio. Questo sistema è spesso sconsigliabile, in quanto gli utenti, la maggior parte delle volte, tendono a ignorare i messaggi “invasivi”, chiudendoli all’istante. Ecco comunque un codice utile per generare un semplice popover personalizzabile. Il codice originale è merito di Fabian Sebastian, lo stile invece è stato modificato e reso più moderno dal sottoscritto.

 

Impostazioni > Modifica head
<script type="text/javascript"> //<![CDATA[ 
var ns4=document.layers var ie4=document.all var ns6=document.getElementById&&!document.all

//drag drop function for NS 4////
/////////////////////////////////
var dragswitch=0 var nsx var nsy var nstemp function drag_dropns(name){ if (!ns4) return temp=eval(name) temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP) temp.onmousedown=gons temp.onmousemove=dragns temp.onmouseup=stopns } 
function gons(e){ temp.captureEvents(Event.MOUSEMOVE) nsx=e.x nsy=e.y } 
function dragns(e){ if (dragswitch==1){ temp.moveBy(e.x-nsx,e.y-nsy) return false } } 
function stopns(){ temp.releaseEvents(Event.MOUSEMOVE) } 

//drag drop function for ie4+ and NS6//// 
///////////////////////////////// 
function drag_drop(e){ if (ie4&&dragapproved){ crossobj.style.left=tempx+event.clientX-offsetx crossobj.style.top=tempy+event.clientY-offsety return false } 
else if (ns6&&dragapproved){ crossobj.style.left=tempx+e.clientX-offsetx+"px" crossobj.style.top=tempy+e.clientY-offsety+"px" return false } } 
function initializedrag(e){ crossobj=ns6? document.getElementById("showimage") : document.all.showimage var firedobj=ns6? e.target : event.srcElement var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body" while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){ firedobj=ns6? firedobj.parentNode : firedobj.parentElement } 
if (firedobj.id=="dragbar"){ offsetx=ie4? event.clientX : e.clientX offsety=ie4? event.clientY : e.clientY tempx=parseInt(crossobj.style.left) tempy=parseInt(crossobj.style.top) dragapproved=true document.onmousemove=drag_drop } } 
document.onmouseup=new Function("dragapproved=false") 
////drag drop functions end here////// 

function hidebox(){ crossobj=ns6? document.getElementById("showimage") : document.all.showimage if (ie4||ns6) crossobj.style.visibility="hidden" else if (ns4) document.showimage.visibility="hide" } 
//]]> 
</script>

Widget/HTML
<div id="showimage" style="position:fixed; width:auto; bottom: 10px; right: 10px;">
 <table width="300"
        style="background: rgba(255,255,255,.7); border: 2px solid #556270"
        cellspacing="0" cellpadding="2">
  <tr>
   <td width="100%">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
     <tr>
      <td style="padding: 6px 15px; border-bottom: 2px solid #556270"
          id="dragbar" style="cursor:move" width="100%"
          onmousedown="initializedrag(event)">
       <layer width="100%"
              onmouseover="dragswitch=1;if (ns4) drag_dropns(showimage)"
              onmouseout="dragswitch=0">
        <ilayer width="100%" onselectstart="return false">
         <strong>
          <small>
           TITOLO POPOVER
          </small>
         </strong>
        </ilayer>
       </layer>
      </td>
      <td style="padding: 6px; cursor:hand; border-bottom: 2px solid #556270">
       <a href="#" style="text-decoration:none; color: #E02525"
          onclick="hidebox(); return false">
        <b>✖</b>
       </a>
      </td>
     </tr>
     <tr>
      <td style="padding: 10px 15px; background: rgba(255,255,255,.7)"
          width="100%" colspan="2">
       TESTO POPOVER
      </td>
     </tr>
    </table>
   </td>
  </tr>
 </table>
</div>

 

Cambiare TITOLO POPOVER con il titolo desiderato e inserire il testo da mostrare al posto della dicitura TESTO POPOVER. Modificare gli stili della tabella non è complicato, ma richiede un poco di conoscenza dei linguaggi html e css. Per ulteriori informazioni, contattami.



Hai trovato l'articolo utile?        No

POPOVER DI ESEMPIO ✖ 
Questo popover è il risultato del codice che trovi in questa pagina. Un widget del genere può essere utile per richiamare l'attenzione su una novità o un'azione da svolgere, come l'iscrizione a una newsletter. Attenzione: il popup non utilizza cookies, quindi compare ogni volta che viene aperta la pagina.