[PDF] [PDF] Introduction to XSL

An overview of the XSL spec (including XSLT and XPath) l Examples of various use cases l Relationship with other XML technologies l A detailed example



Previous PDF Next PDF





[PDF] Introduction à XML et XSLT - Laboratoire de Recherche en

Nous allons maintenant montrer comment, à partir d'un document XML proposant un contenu struc- turé, on obtient avec des transformations XSLT (acronyme de 



[PDF] XML, XSLT pour les interfaces graphiques - Département Informatique

CNAM – UE IHM – NSY110 Introduction à XML XSLT Diapositive 1 / 93 LES TECHNOLOGIES DU WEB 1ère Partie : Introduction au Web 1- Introduction à l'  



[PDF] XSL : Introduction

XSL-FO (Formatting Object): est une DTD XML qui définie la présentation d'un texte sur un document papier (PS, GV, PDF,DPS) ❑ Utilise XPath pour la 



[PDF] Introduction to XML

XSLT Processing Model • Different output formats – xml, html, text • Multiple inputs – via document() –



[PDF] Introduction à XML : principes, syntaxe, schémas - Stéphane Crozat

19 fév 2016 · XSL-XSLT est un exemple de langage de programmation écrit en XML On peut également citer par exemple le langage de script ANT 



[PDF] Introduction to XSLT Concepts - Mulberry Technologies, Inc

What Do You Know Now? C Know HTML (even a little) C XML C SGML C XSLT C XSL-FO



[PDF] Introduction à XML - Centre de Recherche en Informatique - MINES

documents XML en d'autres documents XML • Peut-être vu comme un langage de feuilles de style évolué • Un document XSLT est lui-même en XML 



[PDF] 1 Introduction

Introduction Commencez par Transformation d'un document XML par une feuille XSL Téléchargez le Référencez-le dans albums xml ou utilisez xslt html



[PDF] Introduction to XSL

An overview of the XSL spec (including XSLT and XPath) l Examples of various use cases l Relationship with other XML technologies l A detailed example

[PDF] introductory chemical engineering thermodynamics solution manual

[PDF] introductory chemical engineering thermodynamics solutions manual pdf

[PDF] introductory chemical engineering thermodynamics solutions pdf

[PDF] introductory numerical analysis by dutta jana pdf

[PDF] introductory physics 2

[PDF] introductory statistics pdf

[PDF] intune company portal apns certificate not valid

[PDF] intune company portal apple app store

[PDF] invalid abn form

[PDF] invalid abn withholding

[PDF] inventors challenge word search key

[PDF] inventory control management database project

[PDF] inverse 2d fft matlab

[PDF] inverse chi square calculator

[PDF] inverse d'une matrice 2x2

lIntroductionto XSL lXMLDocuments lStylingXML Documents lXSL lExampleI: Hamlet lExampleII: MixedWritingModes lExampleIII: database lOtherExamples lHowdo theydothat? lTheXSL Process(es) lServer-Side/Client-SideXSL lXSLand otherW3Cspecs lTransformations:XSLT lGeneral-purposeXSLT lTemplates lXSLTstatements l"Play"to HTML lXPath lFormattingObjects basics lPages lThearea model lBlock/inlineareas

Introductionto XSL

MaxFroumentin -W3C

lFormattingObjects: lProperties lExample:Play toFO lTop-levelTemplate lI18NFormatting Objectsand

Properties

lOtherFormatting Objects lExample:mixed writingmodes lIfyou arestillinterested...

Introductionto XSL

MaxFroumentin -W3C

Ina nutshell:XSLis aW3Cspecificationthatdescribes amethod forvisually presentingXMLdocuments.

Thistutorial willcover:

lAnoverview oftheXSL spec(includingXSLT andXPath) lExamplesof varioususecases lRelationshipwith otherXMLtechnologies lAdetailed example

Theseslides areavailableat

Introductionto XSL

Introductionto XSLMaxFroumentin -W3C1 of30

lXML(eXtensible MarkupLanguage)adds informationtotext files,using tagsandattributes[example1],[example2] lTagnames aredefinedfor aspecificdocumenttype . lUsesthe Unicodecharacterset lDesignedto beeasilyprocessed bymachinewhile remaining readable.

XMLDocuments

Introductionto XSLMaxFroumentin -W3C2 of30

lXMLdocuments areideallysemantic. Forexample,this bitof

HTMLis wrong:

Donot smoke,eatordrinkinthisroom. lPresentationdata shouldbeseparate lTwosolutions forstyling:CSS (CascadingStyleSheets) and

XSL(eXtensible StylesheetLanguage).

CSS TITLE{ display:block; font-family:Helvetica; font-size:18pt } Simplemodel: propertiesareassociated totagsor attributes.

StylingXML Documents

Introductionto XSLMaxFroumentin -W3C3 of30

Introductionto XSLMaxFroumentin -W3C3 of30

XSLis analternativeto CSSthatallows greatercontrolover the presentationof theXMLdata.

Whatcan itdo?

l[likeCSS] allowchangingpresentation withoutchangingthe

XMLsource, anddisplaydocuments onvariousmedia,

lalso:I18N features(writingmodes, textalignment, hyphenation),complex pagelayout,footnotes, automatic generationof content(index)

Whois itfor?

Applicationsthat requirehigh-levelquality formatting: lPublishingindustry (books,technicaldocumentation) XSL

Introductionto XSLMaxFroumentin -W3C4 of30

lPublicationon differentmedia:paper, web,mobiledevices . Butis itnotmeant tobeused wherepresentationis deeplytiedto thecontents (likegraphicdesign).

Introductionto XSLMaxFroumentin -W3C4 of30

Aroominthecastle. EnterKING CLAUDIUS,QUEENGERTRUDE, POLONIUS,OPHELIA, ROSENCRANTZ,andGUILDENSTERN Andcanyou,bynodriftofcircumstance, Getfromhimwhyheputsonthis confusion,Gratingsoharshlyallhisdaysofquiet Withturbulentanddangerouslunacy? ...

Formattedfor paperoutput (PDF),formatted fortheWeb(XHTML)

ExampleI: Hamlet

Introductionto XSLMaxFroumentin -W3C5 of30

ExampleII: MixedWritingModes

Introductionto XSLMaxFroumentin -W3C6 of30

...Sundays,TheBlind(Various)TheGloryofGershwinCompilation Kamen,MichaelBrazil ...

PDF

ExampleIII: database

Introductionto XSLMaxFroumentin -W3C7 of30

lW3Cspecs (oneDTD,output formats:HTML,sliced HTML, text,PDF), e.gMathML2.0 ,XML1.0 lThisslideshow

OtherExamples

Introductionto XSLMaxFroumentin -W3C8 of30

lAnXSLstylesheet isan XMLFile lItis associatedtoan XMLdocumentwith aStylesheet

ProcessingInstruction (likeCSS)

Aroominthecastle. lTheactual formattingisperformed eitheroff-lineor onthe browser

Howdo theydothat?

Introductionto XSLMaxFroumentin -W3C9 of30

Theresult treeisan XMLdocumentin whichthemarkup has informationabout howtodisplay thedocument:what fonttouse, thesize ofapage, etc.Thismarkup iscalledFormattingObjects

TheXSL Process(es)

Introductionto XSLMaxFroumentin -W3C10 of30

(elements)and Properties(attributes).For example:

ACT IIIScene 1:Aroominthecastle EnterKING CLAUDIUS,QUEENGERTRUDE, POLONIUS,OPHELIA,ROSENCRANTZ, andGUILDENSTERN...

Generatedfrom:

Aroominthecastle. EnterKING CLAUDIUS,QUEENGERTRUDE, POLONIUS,OPHELIA, ROSENCRANTZ,andGUILDENSTERN...

Introductionto XSLMaxFroumentin -W3C10 of30

lOff-line(e.g. forprinting) lServer-side: servertransforms, clientrenders(not recommended) lClient-side: clienttransforms andrenders(allows userstyles)

Server-Side/Client-SideXSL

Introductionto XSLMaxFroumentin -W3C11 of30

XSLuses CSSpropertiesto expressformatting

information,and usestheCSS inheritancemodel. lCSS: TITLE{ display:block; font-family:Helvetica; font-size:14pt; } lXSL:

[...]

XSLand SVG,MathML

lXSLcan importimagesand othertypesof knownXML

XSLand otherW3Cspecs

Introductionto XSLMaxFroumentin -W3C12 of30

documents:SVG andMathML. lUpto therendererto handleothernamespaces

Introductionto XSLMaxFroumentin -W3C12 of30

XSLTis atransformationlanguage originallydesignedto transform anyXML documentintoanother XMLdocumentcontaining formattingobjects: pages,blocks,graphics, text,etc.

Transformations:XSLT

Introductionto XSLMaxFroumentin -W3C13 of30

XSLThas evolvedtobecome ageneral-purposetransformation languagefrom XMLtoXML. Manyusers useitto transformtheirown XMLdocumenttype to

HTMLfor viewingwithina browser

lXSLTstylesheets useXMLsyntax lAstylesheet isalist oftemplates

... ...

General-purposeXSLT

Introductionto XSLMaxFroumentin -W3C14 of30

lEachtemplate appliestoa typeofnodes intheinput document lWhenmatches aremade,the templatescontainsdesired output.

Sothis willtransform:

Hamlet into Hamlet

Templates

Introductionto XSLMaxFroumentin -W3C15 of30

HTMLcan alsobegenerated verysimplyin thetemplate,using for instance

insteadof means:apply othertemplatesto contents. Implicitrule: textiscopied frominputto output:astyle sheetwithno ruleswill onlyreturnthe characterdataof theinput.

Introductionto XSLMaxFroumentin -W3C15 of30

Allownavigation anditerationwithin theinputdocument tree l Getsa value(nodecontents orattribute)from theinputtree. l

Loopsover thenodesin theselectexpression

l...

Conditional

XSLTstatements

Introductionto XSLMaxFroumentin -W3C16 of30

Verysimple one-templateexampleusing the'pull'method:

<xsl:value-ofselect="PLAY/TITLE"/>

"Play"to HTML

Introductionto XSLMaxFroumentin -W3C17 of30

Result:

TheTragedyofHamlet,PrinceofDenmark< /title></head><body><h1>TheTragedyofHamlet,PrinceofDenmark< /h1><h2>Elsinore.Aplatformbeforethecastle.</h2> <h3style="color:red"> BERNARDO</h3 ><p>Who'sthere?</p><h3style="color:red"> FRANCISCO</h3 ><p>Nay,answerme:stand,andunfoldyourself.< /p>...</p> <h3>Extended,output:numbering, TOC,etc.</h3> Thisuses the'push'method wherestructurefollows theinput. <h3>Introductionto XSLMaxFroumentin -W3C17 of30</h3> Roughlythere isonetemplate foreachtag typeinthe input "Play"to HTML <h3>Introductionto XSLMaxFroumentin -W3C17 of30</h3> l...is anotherW3Cspecification ; lanexpression languagetoselects partsofan XMLdocument tree; lisused in<xsl:templatematch="...">or <xsl:value-ofselect="...">,etc.; landcan beassimple asTITLE,or ascomplexas /ACT[3]/SCENE[position()& lt;5 andposition() > <h4>2]/SPEAKER[@name="Hamlet"]/</h4> <h3>LINE[contains(.,"shoebox")]</h3> XPath <h3>Introductionto XSLMaxFroumentin -W3C18 of30</h3> ltheFO vocabularyisone specialtypeof outputfromXSLT lFOsare organizedasan XMLtree : lEachnode hasassociatedproperties,either directly specified(by attributes)orinherited. <h3>FormattingObjects basics</h3> <h3>Introductionto XSLMaxFroumentin -W3C19 of30</h3> lApage isdividedin 5regions:body, before,after,start and end Pages <h3>Introductionto XSLMaxFroumentin -W3C20 of30</h3> Onthe pagewillbe layedoutareas, thatcontaintext, imagesand otherareas. Anareais arectangle,with paddingandborder: <h3>Thearea model</h3> <h3>Introductionto XSLMaxFroumentin -W3C21 of30</h3> Theconcept ofrelativeorientation andwriting-modes.Where CSS definestop, bottom,left,right, XSLaddsbefore, after,startand end.Areas canbeof type:blockor inline.Blocksare stackedfrom the'before' sidetothe 'after'side,inlines arestackedorthogonally. <h3>Block/inlineareas</h3> <h3>Introductionto XSLMaxFroumentin -W3C22 of30</h3> lDefinethe layout lGenerateareas fo:blockfo:inlinefo:character lOther fo:page-numberfo:external-graphics <h3>FormattingObjects:</h3> <h3>Introductionto XSLMaxFroumentin -W3C23 of30</h3> lEacharea hasaset oftraits:color, background,font-size, etc. lAreasare inheriteddownthe FOtreeusing theCSS inheritancemodel lTheyare specifiedinthe sourceasattributes associatedto <h3>FormattingObjects.</h3> <p><fo:blockfont-family="Helvetica"font-size="14pt"> Thisis Helvetica14pttext. <fo:blockfont-size="200%">Thisis Helvetica28pttext. </fo:block></fo:block></p> <h3>Properties</h3> <h3>Introductionto XSLMaxFroumentin -W3C24 of30</h3> <p><?xmlversion="1.0"encoding="utf-8"?> <xsl:stylesheetxmlns:xsl="http://www.w3.org/1999/XSL/Transform"xmlns:fo="http://www.w3.org/1999/XSL/Format"version="1.0"><!--************************************************************--> <xsl:outputmethod="xml"indent="yes"/> <xsl:templatematch="/"><xsl:apply-templates/></xsl:template><xsl:templatematch="*"><xsl:apply-templates/></xsl:template><xsl:templatematch="PLAY"><fo:root><fo:layout-master-set><fo:simple-page-mastermaster-name="title-page"page-width="210mm"page-height="297mm" margin-top="2cm"margin-bottom="2cm" margin-left="2cm"margin-right="2cm" ><fo:region-bodyregion-name="body"/></fo:simple-page-master><fo:simple-page-mastermaster-name="act-page"page-width="210mm"page-height="297mm" margin-top="2cm"margin-bottom="2cm"</p> <h3>Example:Play toFO</h3> <h3>Introductionto XSLMaxFroumentin -W3C25 of30</h3> <p>margin-left="2cm"margin-right="2cm" ><fo:region-bodyregion-name="body"margin-top="1cm"margin-bottom="1cm"/><fo:region-beforeextent="1cm"region-name="header"/> <fo:region-afterextent="1cm"region-name="footer"/> </fo:simple-page-master></fo:layout-master-set><fo:page-sequencemaster-name="title-page"><fo:flowflow-name="body"><fo:blockdisplay-align="center"><xsl:apply-templatesselect="TITLE"/><xsl:apply-templatesselect="FM"/></fo:block></fo:flow></fo:page-sequence><fo:page-sequencemaster-name="title-page"><fo:flowflow-name="body"><fo:blockspace-before="5cm"><fo:blockfont-size="16pt"space-after="3em"text-align="center"><xsl:text>TableofContents</xsl:text></fo:block><fo:blockstart-indent="3cm"font-size="14pt"> <xsl:apply-templatesselect="ACT"mode="toc"/> </fo:block></p> <h3>Introductionto XSLMaxFroumentin -W3C25 of30</h3> <h3>Example:Play toFO</h3> <h3>Introductionto XSLMaxFroumentin -W3C25 of30</h3> <h3>Introductionto XSLMaxFroumentin -W3C25 of30</h3> <p><fo:blocktext-align="center"font-size="10pt"space-before="1em"space-after="1em"><xsl:apply-templates/></fo:block></xsl:template><xsl:templatematch="PERSONAE/PERSONA|PERSONAE/PGROUP" ><fo:blockspace-after=".5em">< xsl:apply-templates/></fo:block></xsl:template><xsl:templatematch="PERSONAE/PGROUP/PERSONA"><fo:block><xsl:apply-templates/></fo:block></xsl:template><xsl:templatematch="GRPDESCR"><fo:blockstart-indent="5mm">< xsl:apply-templates/></fo:block></xsl:template><xsl:templatematch="SCNDESCR"><fo:blocktext-align="center"font-size="20pt"><xsl:apply-templates/></fo:block></xsl:template><xsl:templatematch="SCENE"><fo:blockid="{generate-id()}"</p> <h3>Example:Play toFO</h3> <h3>Introductionto XSLMaxFroumentin -W3C25 of30</h3> <p>font-size="20pt"space-before.optimum="10pt"space-after.optimum="5pt" text-align="center"><xsl:text>Scene</xsl:text><xsl:number/></fo:block><xsl:apply-templates/></xsl:template><xsl:templatematch="ACT"><fo:page-sequencemaster-name="act-page"><fo:static-contentflow-name="header"><fo:blocktext-align="end"><xsl:value-ofselect="/PLAY/PLAYSUBT"/><xsl:text>-Act</xsl:text> <xsl:numberformat="I"/></fo:block></fo:static-content><fo:static-contentflow-name="footer"><fo:blocktext-align="end"><fo:page-number/></fo:block></fo:static-content><fo:flowflow-name="body"><fo:blockid="{generate-id()}"font-size="24pt"</p> <h3>Introductionto XSLMaxFroumentin -W3C25 of30</h3> <p>space-before.optimum="10pt"space-after.optimum="5pt" text-align="center"><xsl:text>Act</xsl:text><xsl:numberformat="I"/></fo:block><xsl:apply-templates/></fo:flow></fo:page-sequence></xsl:template><xsl:templatematch="ACT"mode="toc"> <fo:block><fo:basic-linkinternal-destination="{generate-id()}"><xsl:text>Act</xsl:text><xsl:number/></fo:basic-link><fo:leaderleader-length="5cm"leader-pattern="dots"leader-alignment="reference-area"/>p.< fo:page-number-citationref-id="{generate-id()}"/></fo:block><xsl:apply-templatesmode="toc"/></xsl:template><xsl:templatematch="SCENE"mode="toc"> <fo:blocktext-indent="2em"><fo:basic-linkinternal-destination="{generate-id()}"><xsl:text>Scene</xsl:text></p> <h3>Example:Play toFO</h3> <h3>Introductionto XSLMaxFroumentin -W3C25 of30</h3> <p><xsl:number/></fo:basic-link><fo:leaderleader-length="5cm"leader-pattern="dots"/> p.< fo:page-number-citationref-id="{generate-id()}"/></fo:block></xsl:template><xsl:templatematch="STAGEDIR"><fo:blocktext-align="center"font-size="10pt"font-style="italic"space-before=".5em"><xsl:apply-templates/></fo:block></xsl:template><xsl:templatematch="SPEAKER"><fo:blocktext-align="center"font-size="10pt"space-before="1em"space-after=".5em"><xsl:apply-templates/></fo:block></xsl:template><xsl:templatematch="LINE"><fo:block><xsl:apply-templates/></p> <h3>Introductionto XSLMaxFroumentin -W3C25 of30</h3> <h3>Example:Play toFO</h3> <h3>Introductionto XSLMaxFroumentin -W3C25 of30</h3> Herewe setthepage format,runningheaders andfooters,and columns <h3>PageFormat</h3> <p><xsl:templatematch="/"><fo:root><fo:layout-master-set><fo:simple-page-mastermaster-name="article-page"page-height="297mm"page-width="210mm" margin-top="20mm"margin-bottom="10mm" margin-left="10mm"margin-right="10mm" ><fo:region-bodyregion-name="main"column-count="2"/> <fo:region-beforeregion-name="header"extent="10pt"/> <fo:region-afterregion-name="header"extent="10pt"/> </fo:simple-page-master></p> <h3>PageSequence Master</h3> <h3>Top-levelTemplate</h3> <h3>Introductionto XSLMaxFroumentin -W3C26 of30</h3> <h3>PageSequence</h3> lContainsstatic-content (headers,footers,siders) lAndmain textflow Flow <h3>Containsblocks, whichcontainstext andinlines</h3> <h3>Introductionto XSLMaxFroumentin -W3C26 of30</h3> lfontsand Unicodecharactersets: [example1],[ example2] lwriting-mode <h3>I18NFormatting ObjectsandProperties</h3> <h3>Introductionto XSLMaxFroumentin -W3C27 of30</h3> lbaselinecontrol dominant-baseline(ofthe principalfont) Modifiedfont size.Baselinetable isscaledand realignedon thedominant baseline: <h3>Introductionto XSLMaxFroumentin -W3C27 of30</h3> <h3>I18NFormatting ObjectsandProperties</h3> <h3>Introductionto XSLMaxFroumentin -W3C27 of30</h3> <h3>Introductionto XSLMaxFroumentin -W3C27 of30</h3> lfo:leader lfo:footnote lfo:page-number,fo:page-number-reference lfo:list,fo:table,fo:float lDynamicproperties (e.g.links) <h3>AndProperties</h3> lAuralProperties (pitch,azimuth,etc.) lHyphenationcontrol (country,hyphenation-character) lKeepsand Breaks <h3>OtherFormatting Objects</h3> <h3>Introductionto XSLMaxFroumentin -W3C28 of30</h3> <h3>Introductionto XSLMaxFroumentin -W3C28 of30</h3> <h3>Example:mixed writingmodes</h3> <h3>Introductionto XSLMaxFroumentin -W3C29 of30</h3> <h3>Statusof thespecifications</h3> lXSLT1.0 andXPath1.0 areW3Crecommendations lRequirementdocuments forXSLT2.0and XPath2.0are available lXPath2.0is nowbeingdeveloped (withXMLQuery) lXSL1.0 (FO)isa CandidateRecommendation <h3>Implementations</h3> lManyimplementations ofXSLT1.0exist: xt,Saxon,Oracle, Sun,Mozilla, (clientside),MSXML (clientside),Lotus, <h3>Unicorn,libxml, mostofthem free</h3> lXSL1.0: 7+implementations:RenderX, AntennaHouse,FOP <h3>Ifyou arestillinterested...</h3> <h3>Introductionto XSLMaxFroumentin -W3C30 of30</h3> (doesSVG), PassiveTeX(doesMathML), etc. <h3>TheFuture</h3> lXSL1.0 willmoveto Recommendation lInteroperability:include SVGandMathML inXSL. lApplications:publishers willbeable toputpublications onthe webas easilyasprinting them <h3>Introductionto XSLMaxFroumentin -W3C30 of30</h3>quotesdbs_dbs20.pdfusesText_26 </div> </div> <div class="left"> <br/> <div style="width:100%;min-height:300px !important;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> </div> <div> <!-- The Modal --> <div> <div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="closeA">×</span> if you Get <b>No preview available</b> Click on (Next PDF) <a href="https://pdfprof.com/PDFV2/Documents3/88809/39/9" class="bblinkss"> Next PDF </a> <iframe frameBorder="0" width="100%" height="50" frameBorder="0" src="https://pdfprof.com/PDFV2/ShowLink.php?links=http://www.w3.org/2002/Talks/05-Interop-MaxF/tut.pdf" ></iframe> <iframe id="ppif" frameBorder="0" width="100%" src="https://pdfprof.com/PDFV2/getFrameTestV3.php?links=http://www.w3.org/2002/Talks/05-Interop-MaxF/tut.pdf&idt=88809&t=39&view=9&url=https://pdfprof.com/PDFV2/Documents3/88809/39/9" style="width:100%;height:90vh;" ></iframe> </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: 85%; } /* The Close Button */ .closeA { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; background:red; padding:1px; } .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>