[PDF] GRILLE DANALYSE / AUDIT SITE INTERNET BLOG SITE E





Previous PDF Next PDF



Rapport danalyse dun site web

Introduction. Dans le cadre de l'UV API08-IHM et Multimédia il nous est demandé de procéder à l'évaluation d'un site web qui soit concurrent à celui que 



Refonte dun site web: Analyse conception et réalisation dune base

8 oct. 2003 Keywords2 : Database design; Programming languages (Electronic Computers); Web sites œ Design;. PHP (Computer program language); HTML (Document ...



ANALYSE DE SITE Évaluer un site

S'il s'agit du site d'une société ou d'une organisation document PDF : http://lewebpedagogique.com/cdidocs/files/2008/12/grille-evaluation-.



GUIDE DE LA PLANIFICATION DU SUIVI ET DE LÉVALUATION

4.3 Suivi : collecte de données analyse et rapports Ces manuels sont disponibles sur le site web du Bureau de l'Evaluation à l'adresse.



Présentation des méthodes de collecte et danalyse de données

d'analyse – la méthode pour analyser le « sens » des données en page « Collect and/or Retrieve Data » du site Internet de BetterEvaluation à l'adresse.



GRILLE DANALYSE / AUDIT SITE INTERNET BLOG SITE E

GRILLE D'ANALYSE / AUDIT. PREMIERE ANALYSE. NoM du SItE wEb <tItLE> : ? Entreprises. SITE INTERNET. BLOG. SITE E-COMMERCE. uRL du SItE : objEctIf du SItE 



Évaluation qualitative de sites web : comment impliquer lusager?

Nous proposons une grille d'analyse qualitative qui permet d'accompagner l'évaluateur qui ne dispose pas nécessairement des connaissances et de l'expérience d' 



Conception et réalisation dun système dinformation sur la formation

Il présente comment l'analyse préalable a permis de définir les besoins objectifs et La gestion du site Web n'est pas la seule activité du service.



61828-conception-realisation-et-developpement-de-sites-web-a-l

le site web du laboratoire de Biologie Moleculaire et Cellulaire a 1'Ecole Normale C. Analyse des besoins pour la realisation des projets.



Elaboration dune stratégie de gestion des contenus des sites Web

15 déc. 2007 CHAPITRE 1 : ANALYSE DES SITES WEB DES EIM ET DES CONDITIONS DE LEUR ... comme « un ensemble de fichiers (pages HTML/Web images



ANALYSER ET EVALUER LA QUALITE D’UN SITE WEB

La grille ci-dessous vise à vous aider à évaluer la valeur d’un site web quelque soit la nature de celui-ci (site institutionnel commercial personnel ) Pour l’évaluation d’un document trouvé sur un site web (article scientifique document technique thèse livre électronique ) se reporter à la fiche « Analyser et



ANALYSER LE CONTENU D’UN SITE INTERNET MODELE DE GRILLE D’ANALYSE

ANALYSER LE CONTENU D’UN SITE INTERNET MODELE DE GRILLE D’ANALYSE Voici les principales questions à se poser pour évaluer et questionner le contenu d’un site Internet : ces trois grands critères d’évaluation et d’analyse (crédibilité contenu ergonomie)

  • Complétez Votre Offre avec Nos Audits Performance et Qualité en Marque Blanche

    Que ce soit en avant-vente, sur un chantier de refonte ou bien pour valider un projet en phase de recette, nos rapports disponibles en marque blanche vous permettront en quelques clics de proposer un livrable de qualité, riche en information et à vos couleurs. Les cas d’utilisation sont très nombreux, et les différentes options d’export que nous av...

GRILLE D'ANALYSE / AUDIT

PREMIERE ANALYSE

NoM du SItE wEb :</h3> <h3>Entreprises</h3> <h3>SITE INTERNET</h3> BLOG <h3>SITE E-COMMERCE</h3> uRL du SI t E objEctIf du SItE / dEScRIPtIoN (bALISE dEScRIPtIoN) : <h3>MotS-cLéS du SItE (bALISE kEYwoRdS) :</h3> cI b LE du SI t E <h3>Public spécialiséEtudiantsEnfants</h3> <h3>Femmes</h3> <h3>Hommes</h3> <h3>Tout public</h3> t <h3>YPE du</h3> SI t E <h3>Institutionnelle / Corporate</h3> <h3>Marchand</h3> <h3>Portfolio</h3> Blog <p>Margaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.com</p> <h3>GRILLE D'ANALYSE / AUDIT</h3> <h3>AudIt EdItoRIAL</h3> E ff I cAcItE <h3>SITE INTERNET</h3> BLOG <h3>SITE E-COMMERCE</h3> N oNouI PE ut t RE AMELI o RE L'adresse et la localisation de l'entreprise sont facilement identifiables <h3>Le secteur et le concept sont distinguables</h3> Peut-on rentrer en contact avec elle de manière rapide L'identité de l'auteur, de la société ou de l'organisation est indiquée <h3>La mise à jour du contenu est régulière</h3> <h3>Le contenu est daté</h3> <h3>La grammaire et l'orthographe sont correctes</h3> <h3>Les mots clés sont mis en avant</h3> Le contenu est hiérarchisé (titre, chapeau, intertitres, alinéas, paragraphe) Les pages sont d'une longueur correcte (Maximum = 3 fois la hauteur de l'écran) <h3>Le ton est adapté à la cible</h3> Le titre des pages permet d'identifier facilement le contenu du site <h3>Visibilité</h3> <h3>Valorisation du contenu</h3> <p>Margaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.com</p> <h3>GRILLE D'ANALYSE / AUDIT</h3> <h3>AudIt ERGoNoMIQuE</h3> <h3>NAVIGAtIoN</h3> <h3>SITE INTERNET</h3> BLOG <h3>SITE E-COMMERCE</h3> N oNouI PE ut t RE AMELI o RE Le fil d'Ariane est identifiable = l'internaute n'est pas perdu dans le site <h3>Avez-vous remarqué des pages en construction</h3> <p>Le bouton accueil est toujours présent = l'utilisateur n'est pas dépendant du bouton page précédente</p> <h3>Le menu est toujours présent</h3> <h3>Présence du plan du site (voir dans le footer)</h3> <p>Profondeur du site - Le nombre de clics est limité (correct = 3) = l'information est trouvée rapidement</p> <h3>Le clic est réactif (0,1 seconde)</h3> Le nombre de rubrique ou de catégorie est bien choisi (correct = 7) <h3>Présence d'un moteur de recherche</h3> <h3>Les résultats sont pertinants</h3> Les contenus publicitaires ou sponsorisés sont identifiés comme tels <h3>Les pubs/popup ne pertubent pas la navigation</h3> <h3>Les pubs/popup ne pertubent pas la navigation</h3> <h3>Les pubs/popup ne pertubent pas la navigation</h3> <h3>Recherche</h3> Pubs liens <p>Margaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.com</p> <h3>GRILLE D'ANALYSE / AUDIT</h3> <h3>AudIt ERGoNoMIQuE</h3> <h3>Accé</h3> SSI bILIté <h3>SITE INTERNET</h3> BLOG <h3>SITE E-COMMERCE</h3> N oNouI PE ut t RE AMELI o RE Le site est-il compatible avec les différents navigateur (IE, Firefox, Safari, Chrome) Le site est-il adapté à chaque résolution d'ordinateur Chaque image est dotée d'une alternive textuelle appropriée (balise " alt ») <h3>L'url est-elle simple et courte</h3> Le temps de chargement de la page d'accueil est-il correct ? Les balises " title » sont-elles renseignés ? <p>Margaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.com</p> <h3>GRILLE D'ANALYSE / AUDIT</h3> <h3>AudIt ERGoNoMIQuE</h3> <h3>LISIbILIté / GRAPhISME</h3> <h3>SITE INTERNET</h3> BLOG <h3>SITE E-COMMERCE</h3> N oNouI PE ut t RE AMELI o RE Les illustrations sont-elles en rapport avec le texte <h3>Le site est agréable à l'oeil</h3> <h3>Les contrastes textes/fonds sont-elles bonnes</h3> Les couleurs utilisées sont-elles harmonieuses et logiquement liées Le site est homogène d'une page à l'autre (pas de rupture visuelle) <h3>Le nombre de couleurs est limité (correct = 4)</h3> <p>Margaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.comMargaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.com</p> <h3>GRILLE D'ANALYSE / AUDIT</h3> <h3>AudIt tEchNIQuE</h3> fonctionnalités (les petits +) <h3>SITE INTERNET</h3> BLOG <h3>SITE E-COMMERCE</h3> N oNouI PE ut t RE AMELI o RE <h3>Présence de Partage Sociaux</h3> <h3>Présence d'un Formulaire de contact</h3> En cas de rejet des données saisies, les champs erronés sont indiqués à l'utilisateur Les sons et vidéos sont déclenchés par l'utilisateur <h3>Présence d'une newsletter + inscription</h3> Un lien de désinscription à une newsletter est présente (site ou mail) Moteur de recherche dynamique / suggestion de recherche <h3>Présence d'un Flux RSS</h3> <p>Margaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.com</p> <h3>GRILLE D'ANALYSE / AUDIT</h3> <h3>AudIt tEchNIQuE</h3> <h3>Référencement</h3> <h3>SITE INTERNET</h3> BLOG <h3>SITE E-COMMERCE</h3> N oNouI PE ut t RE AMELI o RE Votre site possède-t-il une page 404 personnalisée La balise <title> est-elle différente sur toutes les pages du site ? (h1 + la suite) Les balises meta (keyword + description) sont présentes et différente sur chaque page <h3>Les URLs sont réecrites (url+h1)</h3> Chaque page est-elle accessible au moins par un lien HTML en dur <p>Il existe différent niveaux de titre <h1>, <h2>, <h3> ... et sont dans le bon ordre (hiérarchie)</p> Les mots clés sont mis entre des balises <strong> <p>Margaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.com</p> <h3>GRILLE D'ANALYSE / AUDIT</h3> <h3>PARtIcuLARItE d'uN bLoG</h3> <h3>SITE INTERNET</h3> BLOG <h3>SITE E-COMMERCE</h3> N oNouI PE ut t RE AMELI o RE <h3>Noms de(s) rédacteurs sont identifiables</h3> Description de l'auteur / à propos (du site/de l'auteur) Les articles sont courts et accrocheur sur la page d'accueil (présence de la balise -more-) <h3>Chaque article est détaillé</h3> - Date de création - Auteur - Nombre de lectures / de visites - Nombre de commentaires - Catégories - Tags Présence d'un lien article précédent / article suivant <h3>Présence de bookmarking</h3> <h3>Peut-on consulter les archives facilement</h3> Présence d'article similaire (à lire également) Possibilité de voté pour un article (like, fav, étoiles, note) Présence de widget : derniers commentaires, top articles ... <p>L'abonnement au flux RSS est assez visible (la lecture sur un blog se fait à 50 % en s'abonnant aux flux RSS)</p> <p>Margaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.com</p> <h3>GRILLE D'ANALYSE / AUDIT</h3> <h3>PARtIcuLARItE d'uN SItE dE E-coMMERcE</h3> <h3>SITE INTERNET</h3> BLOG <h3>SITE E-COMMERCE</h3> N oNouI PE ut t RE AMELI o RE <p>Les conditions de paiement (taux global du crédit, conditions, réserves et délais d'acceptation) sont indiquées</p> <h3>Le délai de livraison estimé est indiqué</h3> Exhaustivité de détails, de caractèristique sur le produit <h3>La disponibilité des produits est indiquée</h3> Conservation du panier (même sans inscription, même en quittant le site) Présence d'une zone " coup de coeur » / mettre son produit de côté Les conditions de garantie / remboursement sont indiquées Un email est envoyé lorsque le produit indisponible revient en stock Un email de confirmation de commande et de suivie de commande est envoyé Les produits peuvent être classé par différents critère (prix, taille, marque, ...) Lors d'un achat il est possible de faire un retour en arrière facilement et rapidement <h3>Présence de cross selling</h3> Présence d'éléments virtuels (cabine d'essayge, conseillère virtuelle ...) Les conditions de vente ou d'utilisation sont accessibles depuis toutes les pages <p>Margaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.comMargaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.com</p> <h3>GRILLE D'ANALYSE / AUDIT</h3> LES out ILS oNLINE PouR fAIRE uN AudIt htt P ://www. SE o-wEbPRo.coM/oNLINE-AudIt-fR/INdEx.PhP <h3>SITE INTERNET</h3> BLOG <h3>SITE E-COMMERCE</h3> htt P ://www. ALE xA.coM/ htt P ://www.out IRE f.coM/ htt P ://www. SPI dER-SIMuLAtoR.coM/fR/ htt P ://www.wEbStAtShQ.coM/ htt P ://SEodEVGRouP.coM/ htt PS ://AdwoRdS.GooGLE.coM htt P ://b <h3>RowSERSIzE.GooGLELAbS.coM/</h3> htt P ://www.GooGLE.coM/INSIGhtS/SEARch/# htt P NI bb LER SIL kt I dE.coM/ Goo GLE wE b <h3>MAStER tooLS</h3> <p>Margaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.com</p> <p>Margaux Lespagne © | outils web Marketing | Mai 2010 | www.margauxlespagne.com | www.blog.margauxlespagne.com</p>quotesdbs_dbs44.pdfusesText_44</div> <style> .ahover:hover{ background:#efefef; } </style> <div style="padding:5px; font-size:22px;"> <a href="https://pdfprof.com/PDFV2/Documents1/26842/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] procédés théatraux de la mort</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26843/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] comment représenter la mort au théâtre</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26844/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] grille d'évaluation delf a2</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26845/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] grille production écrite b1</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26846/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] la grille dévaluation de la production écrite</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26847/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] grille po b1</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26849/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] méthode vsepr exercices</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26850/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] h2o geometrie</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26852/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] molécule plane définition</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26853/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] représentation de lewis pdf</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26854/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] structure de lewis so2</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26855/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] représentation de lewis des ions</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26856/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] formule de lewis h2o</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26857/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] regle de lewis</a><br/><br/> <a href="https://pdfprof.com/PDFV2/Documents1/26858/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] structure de lewis cours</a><br/><br/> </div> </div> </div> <div class="left"> <br/> <div style="width:100%;padding:2px;"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1570187411384203" crossorigin="anonymous"></script> <!-- Responsive1 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1570187411384203" data-ad-slot="2836242943" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <br/> <br/> <br/> <br/> <div style="background:#efefef;"><br/></div> </div> <div> <style> .exit-intent-popup { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; background: rgba(33, 33, 33, 0.8); transform: translateY(60%) scale(0); transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); } .exit-intent-popup.visible { transform: translateY(0) scale(1); } .newsletter { position: absolute; top: 20%; left: 20%; transform: translate(-20%, -20%); } /* Popup-specific styles */ .newsletter { background: #FFF; padding: 10px; border-radius: 3px; } .close { position: absolute; top: 10px; right: 10px; cursor: pointer; width: 20px; height: 20px; font-size:18px; } </style> <link rel="stylesheet" href="popup.css" /> <div class="exit-intent-popup"> <div class="newsletter"> <span>Nous vous remercions chaleureusement pour votre soutien et votre générosité.</span><br/> <br/> <img src="https://pdfprof.com/PDFV2/6oB.gif" style="max-width:100%;"/> <div style="width:100%;"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://pdfprof.com/PDFV2/Documents1/26841/18/6" rel="nofollow" target="_blank" style="margin-right: 5px; background: #03A9F4; color: white; padding: 1%; font-size:15px; width:46%; ">Share on Facebook</a> <a href="https://api.whatsapp.com/send?text=structure+de+lewis+cours+Download+From++-+https%3A%2F%2Fpdfprof.com%2FPDFV2%2FDocuments1%2F26841%2F18%2F6" rel="nofollow" target="_blank" style="background: #4CAF50; color: white; padding: 1%; width:48%; font-size:15px;">Share on Whatsapp</a> </div> <br/> <span class="close">x</span> </div> </div> <script> /* const CookieService = { setCookie(name, value, days) { let expires = ''; if (days) { const date = new Date(); date.setTime(date.getTime() + (days * 12 * 60 * 60 * 1000)); expires = '; expires=' + date.toUTCString(); } document.cookie = name + '=' + (value || '') + expires + ';'; }, getCookie(name) { const cookies = document.cookie.split(';'); for (const cookie of cookies) { if (cookie.indexOf(name + '=') > -1) { return cookie.split('=')[1]; } } return null; } }; const exit = e => { const shouldExit = [...e.target.classList].includes('exit-intent-popup') || // user clicks on mask e.target.className === 'close' || // user clicks on the close icon e.keyCode === 27; // user hits escape if (shouldExit) { document.querySelector('.exit-intent-popup').classList.remove('visible'); } }; const mouseEvent = e => { const shouldShowExitIntent = !e.toElement && !e.relatedTarget && e.clientY < 10; if (shouldShowExitIntent) { document.removeEventListener('mouseout', mouseEvent); document.querySelector('.exit-intent-popup').classList.add('visible'); CookieService.setCookie('exitIntentShown', true, 30); } }; if (!CookieService.getCookie('exitIntentShown')) { setTimeout(() => { document.addEventListener('mouseout', mouseEvent); document.addEventListener('keydown', exit); document.querySelector('.exit-intent-popup').addEventListener('click', exit); }, 0); } */ </script> <!-- Trigger/Open The Modal --> <!-- The Modal --> <div> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="closeA">×</span> <style> .downlink{ border:1px solid #aaa;color:white;padding:8px;width:98%;color:white;background:green;display:block; } .downlink:hover{ background:blue; cursor:pointer; } </style> <table style="width:80%;"> <tr style="width:100%;"> <td style="width:50%;"><a href="https://pdfprof.com/PDFV2/ShowLink_1.php?vidt=26841&vt=18&links=http%3A%2F%2Fdavidannebicque.fr%2Fwp-content%2Fuploads%2F2018%2F03%2FAnalyse-Audit-SiteWeb-Blog-Ecommerce.pdf" class="downlink" target="_blank">PDF Download</a> </td> <td style="width:45%;"><a href="https://pdfprof.com/PDFV2/Documents1/26841/18/7" class="bblinkss"> Next PDF </a> </td></tr> </table> <iframe id="ppifa" frameBorder="0" width="100%" src="https://pdfprof.com/PDFV2/getFrameTestV3.php?links=http://davidannebicque.fr/wp-content/uploads/2018/03/Analyse-Audit-SiteWeb-Blog-Ecommerce.pdf&idt=26841&t=18&view=6&url=https://pdfprof.com/PDFV2/Documents1/26841/18/6" style="width:100%;height:90vh;" ></iframe> <script> /* var iframe = document.getElementById("ppifa"); var srcv=iframe.src; var loadingStatus = false; function abc(){ iframe.onload = function () { loadingStatus = true; console.log('ok is loaded iframe'); } if(loadingStatus==false) { iframe.src=srcv; } } abc(); */ </script> </div> </div> </div> <style> body {font-family: Arial, Helvetica, sans-serif;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 10px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 5px; border: 1px solid #888; width: 90%; } /* The Close Button */ .closeA { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; background:red; padding:5px; } .closeA:hover, .closeA:focus { color: #000; text-decoration: none; cursor: pointer; } </style> <script> // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("closeA")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> </body> </html>