{"id":14773,"date":"2013-06-18T14:00:13","date_gmt":"2013-06-18T12:00:13","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=14773"},"modified":"2023-02-27T14:40:49","modified_gmt":"2023-02-27T14:40:49","slug":"popup-lightweight-css3-jquery","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/","title":{"rendered":"Realizzare un popup lightweight in CSS3 e jQuery"},"content":{"rendered":"

Quando realizziamo un sito, talvolta potremmo volere dei contenuti che compaiono all\u2019interno di un popup<\/strong>, per esempio un form di login o schede prodotto. Sul web esistono diverse soluzioni molto efficaci, come Colorbox<\/a> o Fancybox<\/a>, ma richiedono naturalmente l\u2019uso di librerie esterne.<\/p>\n

Con il post di oggi, vorrei illustrarvi come realizzare un popup lightweight<\/strong> senza dover installare plugin aggiuntivi e scrivere pochissimo codice di scripting, utile se si desidera avere un numero limitato di popup da inserire nel proprio sito. Troverete l’esempio completo a questo link<\/a>.<\/p>\n

La struttura HTML<\/h2>\n

Come primo passo, stabiliamo quali saranno gli elementi coinvolti nella realizzazione del popup<\/strong>. Inseriamo innanzitutto il link che scaturir\u00e0 l’evento.<\/p>\n

[code type=”markup”]Clicca per vedere il popup in azione<\/a>[\/code]<\/p>\n

Noterete che ho usato un data-attribute, un dato utilizzato per inserire al suo interno qualsiasi informazione che pu\u00f2 risultarci utile nello sviluppo (trovate qui<\/a> la specifica). In questo caso, ho inserito l’id del popup che voglio sia aperto al click. <\/p>\n

Il secondo elemento sar\u00e0 quello che oscurer\u00e0 la parte visibile di schermo:<\/p>\n

[code type=”markup”]<\/p>\n

<\/div>\n

[\/code]<\/p>\n

Infine, inseriamo il markup del nostro popup:
\n[code type=”markup”]<\/p>\n

\n
\n <\/span><\/p>\n
\n

Simple lightweight popup<\/h2>\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ullamcorper nulla et gravida interdum. Quisque dignissim a turpis at posuere. Praesent cursus turpis magna, quis pulvinar est vehicula<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n

[\/code]
\nIl popup \u00e8 costituito da un elemento con classe “popup-exit”, che sar\u00e0 il classico pulsante X per chiudere il popup, e il corpo “popup-content”, in cui possiamo inserire tutto il contenuto desiderato. L’uso di due div intorno a questi ultimi, rispettivamente con classe “popup” e “popup-body” \u00e8 dovuto alle transizioni che applicheremo per la comparsa\/scomparsa del popup.<\/p>\n

IL CSS e le transizioni<\/h2>\n

Realizzata la struttura degli elementi costitutivi, diamogli ora lo stile con cui il popup dovr\u00e0 apparire e il comportamento alla comparsa sfruttando le transizioni di CSS3<\/strong>.<\/p>\n

Cominciamo dall’elemento “oscurante” del sito:
\n[code type=”css”].popup-overlay {
\n width: 100%;
\n height: 100%;
\n position: fixed;
\n background: rgba(196, 196, 196, .85);
\n top: 0;
\n left: 100%;
\n opacity: 0;
\n -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
\n -webkit-transition: opacity .2s ease-out;
\n -moz-transition: opacity .2s ease-out;
\n -ms-transition: opacity .2s ease-out;
\n -o-transition: opacity .2s ease-out;
\n transition: opacity .2s ease-out;
\n}
\n[\/code]<\/p>\n

Questo elemento avr\u00e0 una larghezza ed un’altezza pari alla finestra visualizzata, con posizione fissa. Essendo gi\u00e0 all’interno della pagina dobbiamo renderlo non visibile se non quando si visualizzer\u00e0 un popup<\/strong>: gli diamo quindi opacit\u00e0 nulla e posizione fuori dallo schermo, per non farlo sovrapporre agli elementi della pagina. Infine, utilizziamo le transizioni di CSS3 per stabilire su quale propriet\u00e0 influire ad un cambio di stato del popup: in questo caso un ease-out di 2 decimi di secondo sull’opacit\u00e0. Trovate approfondimenti in merito sulla documentazione W3C<\/a>.<\/p>\n

Inseriamo ora le propriet\u00e0 del popup<\/strong>:
\n[code type=”css”].popup {
\n position: fixed;
\n top: 25%;
\n left: 50%;
\n z-index: -9999;
\n}
\n.popup .popup-body {
\n background: #ffffff;
\n background: -moz-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f7f7f7));
\n background: -webkit-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
\n background: -o-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
\n background: -ms-linear-gradient(top, #ffffff 0%, #f7f7f7 100%);
\n background: linear-gradient(to bottom, #ffffff 0%, #f7f7f7 100%);
\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#f7f7f7′, GradientType=0);
\n opacity: 0;
\n min-height: 150px;
\n width: 400px;
\n margin-left: -200px;
\n padding: 20px;
\n -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
\n -webkit-transition: opacity .2s ease-out;
\n -moz-transition: opacity .2s ease-out;
\n -ms-transition: opacity .2s ease-out;
\n -o-transition: opacity .2s ease-out;
\n transition: opacity .2s ease-out;
\n position: relative;
\n -moz-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
\n -webkit-box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
\n box-shadow: 1px 2px 3px 1px rgb(185, 185, 185);
\n text-align: center;
\n border: 1px solid #e9e9e9;
\n}
\n.popup .popup-exit {
\n cursor: pointer;
\n display: block;
\n width: 40px;
\n height: 40px;
\n position: absolute;
\n top: -20px;
\n right: -20px;
\n background: url(https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/x-btn.png) no-repeat;
\n}[\/code]<\/p>\n

Qui diamo al padre di classe “popup” una posizione desiderata e uno z-index negativo, in modo che esso vada a nascondersi dietro qualunque contenuto della pagina. All’elemento figlio “popup-body” diamo invece le propriet\u00e0 del popup a cui diamo un’opacit\u00e0 nulla e una transizione come per “popup-overlay”. Creiamo anche l’elemento per l’uscita del popup, alla classe “popup-exit”.<\/p>\n

Diamo infine un po di look ai contenuti del popup<\/strong>:
\n[code type=”css”]body {
\n height: 100%;
\n margin: 0;
\n font-family: Arial, sans-serif;
\n color: #444;
\n}
\n.popup-content .popup-title {
\n font-size: 24px;
\n border-bottom: 1px solid #e9e9e9;
\n padding-bottom: 10px;
\n}
\n.popup-content p {
\n font-size: 13px;
\n text-align: justify;
\n}[\/code]<\/p>\n

Giunti a questo punto, dobbiamo stabilire quali saranno le classi che renderanno i nostri elementi visibili. Il CSS sar\u00e0 il seguente:
\n[code type=”css”].overlay .popup-overlay {
\n opacity: 1;
\n left: 0
\n}
\n.popup.visible, .popup.transitioning {
\n z-index: 9999;
\n}
\n.popup.visible .popup-body {
\n opacity: 1;
\n -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;
\n}
\n[\/code]<\/p>\n

Lo script<\/h2>\n

Siamo quasi pronti, ci manca solo di vedere il popup in azione<\/strong>. Al caricamento della pagina, inseriamo:<\/p>\n

[code type=”javascript”]jQuery(document).ready(function ($) {<\/p>\n

$(‘[data-popup-target]’).click(function () {
\n $(‘html’).addClass(‘overlay’);
\n var activePopup = $(this).attr(‘data-popup-target’);
\n $(activePopup).addClass(‘visible’);<\/p>\n

});<\/p>\n

});[\/code]
\nCon questo codice, al click di qualsiasi elemento con data-attribute “data-popup-target”, aggiungiamo una classe overlay al tag HTML per oscurare il contenuto con il nostro div di classe “popup-overlay” e preleviamo il valore in esso contenuto che abbiamo detto essere l’id del popup da rendere visibile. Assegnamo infine a quest’ultimo una classe “visible”. Se tutto \u00e8 andato per il verso giusto, al click del link visualizzerete il vostro popup.<\/p>\n

Ci manca ora l’uscita dal popup, che andrebbe fatta nel momento in cui un utente clicca sulla X, fuori dalla finestra del popup o premendo il tasto ESC da tastiera. Per farlo dovremo rimuovere le classi attivate per la visualizzazione del popup con un accorgimento: se riportiamo lo z-index del popup a 0, non avremo modo di di vedere la transizione applicata con i CSS in uscita. Aggiungiamo quindi una classe temporanea “transitioning” per la durata dell’uscita di scena del popup:
\n[code type=”javascript”]function clearPopup() {
\n $(‘.popup.visible’).addClass(‘transitioning’).removeClass(‘visible’);
\n $(‘html’).removeClass(‘overlay’);<\/p>\n

setTimeout(function () {
\n $(‘.popup’).removeClass(‘transitioning’);
\n }, 200);
\n }[\/code]<\/p>\n

Inseriamo infine i listener per gli eventi che vi ho citato prima per uscire dal popup:
\n[code type=”javascript”] $(document).keyup(function (e) {
\n if (e.keyCode == 27 && $(‘html’).hasClass(‘overlay’)) {
\n clearPopup();
\n }
\n });<\/p>\n

$(‘.popup-exit’).click(function () {
\n clearPopup();<\/p>\n

});<\/p>\n

$(‘.popup-overlay’).click(function () {
\n clearPopup();
\n });[\/code]<\/p>\n

Se ve lo siete perso, ecco qui<\/a> il codice completo.<\/p>\n

Conclusioni<\/h2>\n

Come gi\u00e0 anticipato, sul web esistono numerose risorse da cui possiamo attingere per ottenere un risultato voluto. Per amor dell’ottimizzazione<\/strong> per\u00f2, vale la pena trovare soluzioni che possano essere pi\u00f9 adeguate ai specifici casi. Lascio a voi l’ardua sentenza!<\/p>\n","protected":false},"excerpt":{"rendered":"

Quando realizziamo un sito potremmo volere dei contenuti che compaiono all\u2019interno di un popup. Sul web esistono soluzioni efficaci che richiedono l\u2019uso di librerie esterne, ma vediamo come realizzare un popup lightweight<\/strong> senza installare plugin aggiuntivi.<\/p>\n","protected":false},"author":4,"featured_media":14787,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[108],"tags":[69,97,317],"class_list":["post-14773","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppo","tag-css3","tag-jquery","tag-popup"],"yoast_head":"\n\u2022 Realizzare un popup lightweight in CSS3 e jQuery - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: Realizzare un popup lightweight in CSS3 e jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 Realizzare un popup lightweight in CSS3 e jQuery - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: Realizzare un popup lightweight in CSS3 e jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"Artera\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/artera.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-18T12:00:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T14:40:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/popup.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1\" \/>\n\t<meta property=\"og:image:height\" content=\"1\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Sergio Ravera\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Ravera\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"Realizzare un popup lightweight in CSS3 e jQuery\",\"datePublished\":\"2013-06-18T12:00:13+00:00\",\"dateModified\":\"2023-02-27T14:40:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/\"},\"wordCount\":1077,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/06\\\/popup.jpg\",\"keywords\":[\"CSS3\",\"jquery\",\"popup\"],\"articleSection\":[\"Sviluppo\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/\",\"name\":\"\u2022 Realizzare un popup lightweight in CSS3 e jQuery - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/06\\\/popup.jpg\",\"datePublished\":\"2013-06-18T12:00:13+00:00\",\"dateModified\":\"2023-02-27T14:40:49+00:00\",\"description\":\"Leggi dal blog: Realizzare un popup lightweight in CSS3 e jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/06\\\/popup.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2013\\\/06\\\/popup.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/sviluppo\\\/popup-lightweight-css3-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Realizzare un popup lightweight in CSS3 e jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"name\":\"Artera\",\"description\":\"Swiss Premium Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.artera.net\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\",\"name\":\"Artera\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"width\":300,\"height\":77,\"caption\":\"Artera\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/artera.net\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/artera\\\/\",\"https:\\\/\\\/www.instagram.com\\\/artera_swiss\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\",\"name\":\"Sergio Ravera\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"caption\":\"Sergio Ravera\"},\"description\":\"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sergioravera\\\/\"],\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/author\\\/sergio-ravera\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u2022 Realizzare un popup lightweight in CSS3 e jQuery - Artera","description":"Leggi dal blog: Realizzare un popup lightweight in CSS3 e jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 Realizzare un popup lightweight in CSS3 e jQuery - Artera","og_description":"Leggi dal blog: Realizzare un popup lightweight in CSS3 e jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2013-06-18T12:00:13+00:00","article_modified_time":"2023-02-27T14:40:49+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/popup.jpg","width":1,"height":1,"type":"image\/jpeg"}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"5 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"Realizzare un popup lightweight in CSS3 e jQuery","datePublished":"2013-06-18T12:00:13+00:00","dateModified":"2023-02-27T14:40:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/"},"wordCount":1077,"commentCount":23,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/popup.jpg","keywords":["CSS3","jquery","popup"],"articleSection":["Sviluppo"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/","url":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/","name":"\u2022 Realizzare un popup lightweight in CSS3 e jQuery - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/popup.jpg","datePublished":"2013-06-18T12:00:13+00:00","dateModified":"2023-02-27T14:40:49+00:00","description":"Leggi dal blog: Realizzare un popup lightweight in CSS3 e jQuery. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/popup.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2013\/06\/popup.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/sviluppo\/popup-lightweight-css3-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"Realizzare un popup lightweight in CSS3 e jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.artera.net\/it\/#website","url":"https:\/\/www.artera.net\/it\/","name":"Artera","description":"Swiss Premium Hosting","publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.artera.net\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.artera.net\/it\/#organization","name":"Artera","url":"https:\/\/www.artera.net\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","width":300,"height":77,"caption":"Artera"},"image":{"@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/artera.net\/","https:\/\/www.linkedin.com\/company\/artera\/","https:\/\/www.instagram.com\/artera_swiss\/"]},{"@type":"Person","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0","name":"Sergio Ravera","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","caption":"Sergio Ravera"},"description":"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.","sameAs":["https:\/\/www.linkedin.com\/in\/sergioravera\/"],"url":"https:\/\/www.artera.net\/it\/author\/sergio-ravera\/"}]}},"_links":{"self":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/14773","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/comments?post=14773"}],"version-history":[{"count":1,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/14773\/revisions"}],"predecessor-version":[{"id":234073,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/14773\/revisions\/234073"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media\/14787"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=14773"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=14773"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=14773"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}