22 mar. 2005 Contrairement aux fichiers créés avec des logiciels de traitement de textes ou de PAO par exemple les pages.
Nul besoin de presenter HTML qui permet de creer des pages Web. Sa sont identiques pour plusieurs produits de la meme gamme (nous considerons.
Pour cela nous allons d'abord voir les bases du code HTML et CSS. Pour coder dans ces deux langages il existe plusieurs possibilités :.
Un site web est un ensemble de plusieurs pages HTML appartenant à un domaine. • Envoyées par un serveur à la demande d'un client.
et https://dash.plot.ly/dash-html- components. Page 44. Tableaux de bord avec Python Dash. 2. Fonctions de rappel.
10 jui. 2015 balises HTML de la page et éventuellement un système de cache pour améliorer ... connexion 3G/4G en plus de plusieurs des caractéristiques ...
Page 1. R. Guide du webmaster. APPARENCE DU SITE WEB . Bandeau personnalisable en HTML . ... Vous pouvez ajouter plusieurs pages de ce type.
des pages Web et les convertir ensuite en documents au format PDF. sélectionnez HTML et cliquez sur Options. ... téléchargez plusieurs niveaux de pages.
Pour cela nous allons d'abord voir les bases du code HTML et CSS. Pour coder dans ces deux langages il existe plusieurs possibilités :.
16 avr. 2018 Writer ne remplace pas les espaces multiples du document original par le code HTML des espaces insécables. Si vous désirez des espaces ...
You can start with using Notepad a text editor that is included in your Windows installation If you are not using Windows or if you prefer other text editors there is a lot of free software that you can download from the Internet Or you could get one of those HTML or WYSIWYG editors
What Is Inside?
About this example
About This Example
The example code is for converting a HTML source document into a multi-page PDF. The input HTML will display a lengthy UI in the browser. It shows a mixed type of HTML elements like images, heading, links and more. This code contains three HTML templates to include in the landing page. The PDF content splitting can be template-based or overall cont...
Ways to Split Html Source Into Multi-Page Pdf
Breaking a lengthy HTML to multiple PDF pages can be done by two types of splitting mechanisms. 1. Auto splitting by setting the PDF per-page length 2. Add HTML chunks to the target PDF resource. This code handles both the methods for splitting the documentinto a multi-page PDF.
Html Template Source to Convert Into Pdf
This section shows the three HTML templates created for this example. These templates show content using HTML elements. It shows heading, image, paragraphs and bordered box containers. It shows sample HTML content styled with CSS.After conversion, this style will be replicated in the output multi-page PDF. Template/html-template.php Template/html-t...
Building Interface with Source Template and Conversion Controls
This is the landing page HTML that includes all templatefiles we have seen in the last section. It displays a dropdown option to choose the HTML content splitting mechanism. There are two options, auto splitting and template-based splitting. The autosplitting is a default one that skips to the next page once the specified length is reached. By clic...
Multi-Page Pdf Conversion Output
This screenshot shows the PDF output. We can see the document is split based on the template. It generates the PDF by selecting the second splitting mechanism from the dropdown. The first page displays the template with the imageelement. The second and third pages show the receipt and contact details from the templates.
How to break a lengthy HTML to multiple PDF pages?
Breaking a lengthy HTML to multiple PDF pages can be done by two types of splitting mechanisms. Add HTML chunks to the target PDF resource. This code handles both the methods for splitting the document into a multi-page PDF. This section shows the three HTML templates created for this example. These templates show content using HTML elements.
How do I convert HTML to PDF?
How to convert HTML to PDF quickly using the Acrobat extension for your web browser: 1. Open the HTML web page in your Microsoft, Google, or Mozilla browser. 2. Select Convert to PDF in the Adobe PDF toolbar. 3. Name the file and save the new PDF file in your desired location. Convert web pages with Acrobat.
What is input HTML & PDF content splitting?
The input HTML will display a lengthy UI in the browser. It shows a mixed type of HTML elements like images, heading, links and more. This code contains three HTML templates to include in the landing page. The PDF content splitting can be template-based or overall content-based.
How to generate a multi-page PDF using jspdf?
The PDF content splitting can be template-based or overall content-based. The landing page will have a dropdown field. It has options to choose the type of splitting mechanism to generate a multi-page PDF. It contains a button control to trigger PDF conversion. It uses the jsPDF library and its dependencies to implement the PDF generation.
Intégration WEBHTML PRÉSENTATION
CARDONA ALAIN - IUT MMI - 2019
Un site internet•Un site web est un ensemble de plusieurs pages HTML appartenant à un domaine
•Envoyées par un serveur à la demande d'un client•Affichées par un navigateur dans l'ordinateur client
CARDONA ALAIN - IUT MMI - 2019
La réponse est constituée du code (HTML, CSS, JavaScript)
Architecture 3-Tiers
CARDONA ALAIN - IUT MMI - 2019
Le serveur est assez complexe et est porteur :
•D'un service Apache qui le transforme en serveur internet •D'un langage Hôte : Le php •D'un Système de gestion de base de données (Mysql, postgres ou oracle...)
CARDONA ALAIN - IUT MMI - 2019
WampServer(anciennement WAMP5) est un un environnement comprenant : •Un serveur internet
Apache
•Un Sgbd MySQL •Un interpréteur de script PHP •Un outil
PhpMyAdmin
pour l'administration Web des bases MySQL.
Il permet de faire fonctionner localement (sans avoir à se connecter à un serveur externe) des sites locaux.
Il est impératif d'installer cet environnement sur vos machines Personnelleshttp://www.wampserver.com/
•HTML est le langage de balisage standard pour la création de pages Web. •HTML signifie Hyper Text Markup •HTML décrit la structure d'une page Web •HTML est constitué d'une série d'éléments HTML indiquant au navigateur comment afficher le contenu •Les éléments HTML sont représentés par des balises •balises HTML morceaux d'étiquette de contenu tels que "rubrique », " paragraphe », " table », et autres •Les navigateurs ne présentent pas les balises HTML, mais les utilisent pour afficher le contenu de la page
Qu'est
-ce que HTML?
CARDONA ALAIN - IUT MMI - 2019
CARDONA ALAIN - IUT MMI - 2019
Editeur de texte
•Il faut un éditeur de texte pour créer vos pages •Word n'est pas un éditeur de texte •Quelques éditeurs pour le PC et le mac :
Exemple d'une page HTML
CARDONA ALAIN - IUT MMI - 2019
Explication de la page HTML
CARDONA ALAIN - IUT MMI - 2019
• déclare le document en HTML5 • est l'élément racine d'une page HTML • élément contient des informations méta sur le document •
élément spécifie une rubrique pour le document •<body> élément contient le contenu de la page visible •<h1> <h3>élément définit un grand titre</h3> •<p> <h3>élément définit un paragraphe</h3> •Les balises HTML sont des noms d'éléments entourés de crochets < balises >: <h3>Les balises HTML</h3> <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <BaliseDébut> contenu ici ... </ BalisedeFin> •Les balises HTML sont généralement par pairescomme <p>et</p> •Le premier mot - clé dans une paire est la balise de début •le deuxième mot - clé est la balise de fin •La balise de fin est écrit comme la balise de début, mais avec une barre oblique inséré avant le nom de la balise <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <h3>Résultats dans Firefox</h3> <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <h3>Structure de la page HTML</h3> <p>Note:Seul le contenu à l' intérieur du section <body> (la zone blanche ci - dessus) est affiché dans un navigateur.</p> <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <h3>Le conteneur</h3> Html • L'élément <html> représente la racine d'un document HTML ou XHTML. Tout autre élément du document doit être un descendant de cet élément. <h3>Il représente une structure</h3> qui intègre les éléments de la page HTML <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <h3>Le conteneur</h3> Head • La balise < head > est un conteneur pour les métadonnées • Les <h3>Métadonnées</h3> sont des données sur le document HTML. • Les <h3>Métadonnées</h3> ne sont pas affichées. • La balise < head > est placé entre < html > et < body >tag: <h3>Spécifie l'utilisation d'une</h3> collection caractères accentués <h3>ALAIN CARDONA - 2019 - DUT MMI</h3> <p>Les commentaires•Il est conseillé d'ajouter des commentaires à votre source en utilisant la</p> syntaxe suivante : <!-- Mon commentaire --> <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <h3>Les rubriques</h3> •Rubriques HTML sont définies avec les balises < hn h1 > définit la rubrique et la police la plus importante. h6 > définit la rubrique et la police la moins importante. <h3>Les rubriques (titres) sont importantes</h3> <h3>CARDONA ALAIN - IUT MMI - 2019</h3> •Les moteurs de recherche utilisent les rubriques pour indexer la structure et le contenu de vos pages Web. •Les utilisateurs abusent souvent des rubriques. Il est important d'utiliser des titres pour afficher la structure du document. •<h1>Les titres doivent être utilisés pour les titres principaux, suivi par <h2>rubriques, le moins important <h3>, et ainsi de suite. <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <h3>Formats des rubriquesRemarque:</h3> Utilisez des titres HTML pour les rubriques seulement. Ne pas utiliser des titres pour rendre le texte BIG ou gras . <h3>Des rubriques plus grandes</h3> <h3>Chaque rubrique HTML a une taille par défaut.</h3> vous pouvez spécifier la taille avec le code style attribut, en utilisant l'attribut : font-sizepropriété : NbrePixel <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <h3>Formats des rubriques</h3> <h3>HTML Règles horizontales</h3> •La balise <hr> définit une rupture thématique dans une page HTML, et est le plus souvent affiché en règle horizontale. •La balise <hr> est utilisée pour séparer le contenu (ou définir un changement) dans une page HTML : <h3>CARDONA ALAIN - IUT MMI - 2019</h3> Les paragraphes •Les Rubriques HTML sont définies avec les balises < p>. <h3>CARDONA ALAIN - IUT MMI - 2019</h3> Les paragraphes •Vous ne pouvez pas être sûr de savoir comment HTML sera affiché. <h3>Résultat obtenu :</h3> <h3>Résultat obtenu :</h3> <h3>CARDONA ALAIN - IUT MMI - 2019</h3> Balise Effet<p> Définit un paragraphe<br> Insère une ligne<pre> Formatte un paragraphe par ligneRésumé des mise en forme <h3>CARDONA ALAIN - IUT MMI - 2019</h3> •Les Rubriques HTML sont définies avec les balises : img > src = ''Image.jpg''. <h3>Les Images</h3> <h3>Attention aux</h3> dimensions de l'image <h3>CARDONA ALAIN - IUT MMI - 2019</h3> •Un lien Hypertexte permet d'aller vers un autre document en cliquant dessus. La balise utilidée est <a>. <h3>Cas d'un lien externeLes liens Hypertextes</h3> <a href ="http://www.univ-tln.fr/">Site universitaire de Toulon</a> <h3>L' attribut</h3> href spécifie l'adresse de destination <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <h3>Les Attributs</h3> ·Tous les éléments HTML peuvent avoir des attributs <h3>·Les attributs fournissent des</h3> informations supplémentaires au sujet d' un élément ·Les attributs sont toujours spécifiés dans la balise de début ·Les attributs viennent généralement en paires nom / valeur comme: name = " valeur » <h3>L'attribut href</h3> • Liens HTML sont définis avec l' <h3>étiquette.</h3> • L'adresse du lien est spécifié dans le code attribut <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <h3>Les AttributsL'attribut SRC</h3> •Images HTML sont définies avec l' < img > étiquette. •Le nom de fichier de la source d'image est spécifiée dans le code attribut •Width et height attributs, qui spécifie la largeur et la hauteur de l'image <h3>L'attribut alt</h3> <h3>L'attribut</h3> alt spécifie un texte alternatif à utiliser, si une image ne peut pas être affichée. <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <h3>L'attribut</h3> <h3>Target</h3> <a href ="http://www.univ-tln.fr/ " target="_blank">Site universitaire de Toulon</a> <h3>L'attribut target signale où ouvrir la cible :</h3> _blank - Ouvre le document lié dans une nouvelle fenêtre ou onglet _self - permet d'ouvrir le document lié dans la même fenêtre / onglet comme il a été cliqué (ce qui est par défaut) _parent - Ouvre le document lié dans le cadre parent _top - Ouvre le document lié dans le corps entier de la fenêtre frameName - Ouvre le document lié dans un cadre nommé <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <h3>Les autres liens•Cas d'un lien local</h3> <ahref ="ajoutclient.php"> <h3>Ajouter un client</h3> </a> a href ="http://www.univ-tln.fr/"> <img src="Logo-uTln.png" alt = "Université de Toulon" style ="width:104px;height:27px;border:0;" /a> <br> •Utiliser une image comme lien •Ajouter une aide contextuelle avec un titre <a href ="http://www.univ-tln.fr/" title = "Aller sur la page de l'université de Toulon"> <h3>Site universitaire de Toulon</h3> /a> <br> <h3>CARDONA ALAIN - IUT MMI - 2019</h3> <p>Les autres liens : Créer un signet Un signet est utilisé pour réaliser un saut une parties spécifiques de la page.</p> A utiliser sur des pages longues.•Utiliser un signet comme lien •Méthodologie <h3>Créer le signet</h3> <h3>Ajouter ensuite un lien vers la destination.</h3> •Lien vers la destination•Lien vers la destination •Lien vers une destination sur une autre page <h3>CARDONA ALAIN - IUT MMI - 2019</h3> Les Rubriques HTML sont définies avec les balises : ul> (liste non numérotée / puce) •ou les balises < ol> étiquette (ordonnée / liste numérotée) •Dans les 2 cas suivis par les balises < li> <h3>Les Listes</h3> <h3>CARDONA ALAIN - IUT MMI - 2019</h3> •Les Rubriques HTML sont définies avec les balises < button <h3>Les Boutons</h3> <h3>Notez l'utilisation d'une balise particulière</h3> qui ne possède pas de balise de fin et qui permet le passage à la lignequotesdbs_dbs27.pdfusesText_33</div>
<style>
.ahover:hover{
background:#efefef;
}
</style>
<div style="padding:5px; font-size:22px;">
<a href="https://pdfprof.com/PDFV2/Documents1/4803/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] changer la couleur d'une seule page word 2013</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4805/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] couleur fond de page word 2010</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4806/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] exercice verbe être au présent ? imprimer</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4807/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] cycle de vie du papillon maternelle</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4808/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] cycle de vie du papillon ce2</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4809/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] de la chenille au papillon cycle 3</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4810/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] métamorphose chenille papillon cycle 2</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4811/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] cycle de vie du papillon ce1</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4812/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] le cycle de vie du papillon</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4813/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] de la chenille au papillon maternelle</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4815/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] hygiène et sécurité au laboratoire danalyses médicales</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4816/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] manuel qualité laboratoire 15189</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4817/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] ovide les amours pdf</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4818/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] les 16 metamorphoses d ovides pdf</a><br/><br/>
<a href="https://pdfprof.com/PDFV2/Documents1/4819/18" style="font-size:27px;padding:0.5%;border:1px solid #aaa;width:99%;display:block;" class="ahover">[PDF] resume des 16 metamorphoses</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/4802/18/4" 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=resume+des+16+metamorphoses+Download+From++-+https%3A%2F%2Fpdfprof.com%2FPDFV2%2FDocuments1%2F4802%2F18%2F4" 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=4802&vt=18&links=https%3A%2F%2Fmoodle.univ-tln.fr%2Fpluginfile.php%2F229612%2Fcourse%2Foverviewfiles%2FInt%25C3%25A9gration%2520WEB%2520partie%25201.pdf%3Fforcedownload%3D1" class="downlink" target="_blank">PDF Download</a>
</td>
<td style="width:45%;"><a href="https://pdfprof.com/PDFV2/Documents1/4802/18/5" class="bblinkss"> Next PDF </a>
</td></tr>
</table>
<iframe id="ppifa" frameBorder="0" width="100%" src="https://pdfprof.com/PDFV2/getFrameTestV3.php?links=https://moodle.univ-tln.fr/pluginfile.php/229612/course/overviewfiles/Int%C3%A9gration%20WEB%20partie%201.pdf?forcedownload=1&idt=4802&t=18&view=4&url=https://pdfprof.com/PDFV2/Documents1/4802/18/4" 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>
Comment enregistrer des pages Web (pages html) ?