Come fare una finestra pop-up senza JavaScript

September 12

Le finestre pop-up sono una parte utile, ma a volte frustrante di Internet. Quando viene utilizzato per trasmettere informazioni, sono uno strumento prezioso. Quando viene utilizzato di vendere pacchetti vacanza, sono fastidiosi. Quando si lavora come web designer, è necessario anche guardare a come si crea un pop-up. In genere, si utilizza JavaScript per codificare il pop-up, ma alcuni browser bloccare JavaScript, e non funziona sempre correttamente. È possibile creare testo pop-up nella vostra Cascading Style Sheets (CSS) ad apparire sulla pagina quando il mouse su un blocco di ipertesto.

istruzione

1 Aprire la pagina Web in uno strumento di editing HTML, ad esempio Blocco note.

2 Posizionare il cursore all'interno del collegamento ipertestuale si desidera che il pop-up in.

3 Tipo "<span>" all'inizio del testo all'interno del collegamento ipertestuale.

4 Tipo </ span> alla fine del testo all'interno del collegamento ipertestuale.

5 Salvare il file e chiuderlo.

6 Aprire il file CSS in un editor di testo.

7 Inserire il testo seguente:

"Div # collega un arco {display: none;}"

Ciò mantiene il testo pop-up nascosto da apparire quando si apre la pagina.

8 Inserire il testo seguente:

"Div # collega un: arco hover {display: block;

position: absolute; top: 200px; left: 0; width: 125px;

padding: Xpx; margin: YPX; z-index: Z;

color: # (codice di colore); sfondo: nero;

font: 10px (font), (stile); text-align: (allineamento);} "

Le ultime tre linee rappresentano come apparirà il testo. Sostituire "X", "Y" e "Z" con i valori appropriati. Sostituire "(codice colore)", "(fonte)", "(stile)" e "(allineamento)" con i valori appropriati per la pagina Web.

9 Salvare e chiudere il file CSS.

Consigli e avvertenze

  • Questo metodo è efficace solo per il testo pop-up. Non usare icone o altri elementi grafici.