Home > ASP.NET, Webmaster > Popup senza javascript con il css

Popup senza javascript con il css

Un  esempio di utilizzo del css per far apparire popup accanto al testo sfruttando i tag <a> e <span>.
Questo metodo, In asp.net, con l’elaborazione di <span sul lato server consente di ottenere box con contenuto dinamico articolati  come evidenziato in figura.

popup css  senza javascript

popup css senza javascript

La base del css popup consiste nel non rendere visibile al caricamento della pagina, il contenuto del tag  <span sfruttando la proprietà display:none.

Quindi quando il mouse passa sul link, selector/stato link:over, la proprietà display viene impostata in display:block cosicchè il contenuto del tag span viene reso visibie.

Affichè la posizione dell popup faccia riferimento alla posizione del link si utilizzano la proprietà position:relative per il link e position:absolute per lo stato a:hover span.

La proprietà z-index definisce il livello in cui si collocano gli elementi e può far comodo per gestire i rapporti di posizione avanti/dietro anche degli elementi contigui presenti nella pagina.

Esempio base

popup css simple

popup css simple

parte html

<div>
Questo è un esempio di popup senza javascript <a class=”popupcss” href=”#”>my blog  <span>E questo è il popup che appare</span></a>
</div>

le impostazioni css

<style type="text/css">
a.popupcss { position: relative!important; z-index:9}

a.popupcss:hover { z-index:10}

a.popupcss span { display:none!important}

a.popupcss:hover span { 
  display:block!important; position:absolute;
  bottom:1em; left:2em; min-width:10em; padding:2px; 
  border: 2px inset #797979; background-color:#f9f9f9 }
</style>

Sotto lo <span   con  runat=”server”  che in asp.net consente di eleborare  il controllo <span sul lato server e che è che è stato usato epr ritornare quanto presente nella figura in alto.

<div> Questo è un esempio di popup senza javascript  <a href=”#”>popup css <span id=”Modules” class=”Normal” runat=”server” /> </a>  </div>

pagina con le risorse dedicate al world wide web 

 

Annunci
  1. Non c'è ancora nessun commento.
  1. No trackbacks yet.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: