Programmazione di un Popup

[soushi]

Salve, ho qualche problema nel programmare una finestra popup in wordpress. Ciò che devo fare è creare questa finestra in ogni pagina del mio blog. Deve essere una finestra grande quanto la pagina stessa, e aprirsi al click su un'icona specifica. Questa finestra dovrà una volta aperta mostrare gli aggiornamenti avvenuti in ogni sezione del blog, esempio nella categoria cucina è stato scritto un nuovo articolo, questo dovrà comparire a destra della categoria nel momento in cui io passo sopra a questa con il mouse.
Qualcuno mi sa aiutare?
Grazie in anticipo a tutti quelli che mi sapranno aiutare risponderanno

[fermat]

potresti usare le finestre modali.
ci sono parecchi esempi in giro per javascript e jquery.

sennò puoi usare un plugin specifico per wordpress.
tipo questo: https://wordpress.org/plugins/easy-modal/

[MItaly]

Sposto in CMS.

[soushi]

ho provato a usare easy modal e sembra poter funzionare ma nel parte del codice non so che codice mettere, nel senso che so come mettere le categorie di lato con codice html e collegamento alla pagina della categoria ma non so come fare in modo che passando sopra mi faccia vedere gli ultimi articoli scritti, senza che sia necessario andare a modificare i link degli articoli ogni volta.

[soushi]

In pratica la mia intenzione è quella di creare una pagina popup come questa www.diredonna.it, cliccando sull'icona di menù viene fuori una finestra con i nuovi articoli scritti
Come faccio a farla simile a quella?

[fermat]

la strada è sempre la stessa che ti ho indicato prima:
-o cerchi qualche script jquery / javascript e lo integri nel template
-o cerchi qualche plugin per wordpress e lo installi

[soushi]

Ho provato tantissimi plugin anche quello da te proposto poco sopra e alla fine non mi è servito a molto. Ho provato anche a cercare qualche script o a scrivere io il codice della pagina, ma non è venuto fuori niente di utile.

[rinaldi]

Concordo con Fermat jquery , un piccolo esempio .

<button    onClick="$('#box').show().animate( { height:$(window).height()})"></button>

<div id="box" style=" display:none;  font-size:12px; padding-left:40px; position:fixed; top:20px;  border:1px solid #CCC; background-color:#36C; height:50px; width:100%;margin-left:auto;margin-right:auto;  padding:5px; overflow-x:hidden;overflow-y:auto; z-index:100;color:#069 ">