cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <main>
  <p><input type="button" value="Popup"/></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione labore delectus alias architecto perferendis aut cum praesentium, consectetur soluta amet error necessitatibus maxime facere commodi. Autem odit ex cupiditate doloribus!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi fugiat doloribus delectus, ducimus dolores. Incidunt voluptates odit tenetur, reiciendis, aperiam ducimus alias sed, itaque laudantium numquam perferendis aspernatur, nisi sapiente! </p></main>


<section>
  <p><span class="bt">&times;</span></p>
  <h1>POPUP </h1>
  <p><img src="http://tutovisuel.com/dawn-190055_960_720.jpg" alt="" width="400"/></p>
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis eligendi corporis dolor non, dolorem aut culpa, exercitationem? Possimus quo, dolor! Quaerat, repellendus, tempora! Maiores nam, est. Ullam recusandae iusto ratione?</span>
    <span>Libero, laudantium, perferendis! Fugit, natus dolore perferendis neque porro reprehenderit distinctio odio reiciendis illo optio provident incidunt ipsum esse nam obcaecati ad. Soluta atque, odit suscipit quis doloremque ex dolorum!</span>
    <span>Sapiente ratione, alias nisi ipsum perspiciatis accusantium voluptates maxime, libero minima, odio quas impedit quae debitis repellendus harum unde modi placeat voluptatem saepe consequatur cumque. Quam sunt quisquam enim provident.</span>
    <span>Placeat repellat facilis, provident quae reprehenderit culpa cum excepturi mollitia quia illum tempora dolor, nam corporis autem fugiat at nisi magnam, doloremque eum, tenetur facere unde totam. Aliquam, architecto, voluptatum.</span>
    <span>Cum porro nostrum id vero dolores minus sunt hic exercitationem, recusandae rerum ducimus consequuntur deserunt nam, vel aspernatur, ipsa. Blanditiis error tenetur praesentium perspiciatis, quidem molestiae itaque recusandae cumque quam.</span>
    <span>Dolorem modi vel, facere nulla deleniti similique omnis minima alias iure eum doloremque ratione quos accusantium reiciendis! Consequuntur natus officiis ullam, sint labore. Assumenda animi voluptates excepturi, iure cum labore.</span>
    <span>Rerum quam maiores dolores, qui ipsum, natus est iusto reiciendis perferendis architecto recusandae cumque eveniet exercitationem distinctio nobis doloribus impedit culpa eos doloremque quidem! Aperiam praesentium, modi nisi dolore dolorem!</span>
    <span>Recusandae, hic, a. Iure dolores nostrum odio cupiditate officia unde sapiente eius consequatur, temporibus ipsum non sit quas incidunt. Dignissimos alias quo, voluptate culpa magni laboriosam minus iusto neque ipsa.</span>
    <span>Rem incidunt necessitatibus reiciendis at illum magnam asperiores dolore. Temporibus sit eaque magnam ut, neque praesentium, veritatis a consequuntur velit odit soluta, nostrum quos ea quis quod optio minus tempore!</span>
    <span>Aperiam in ipsam error maiores iste nostrum itaque tempore, dolores nesciunt eum quae ad veritatis facere aut vel, velit odio magnam consectetur impedit rem. Quisquam neque suscipit eveniet nesciunt fugit!</span>
    <span>Deserunt dignissimos pariatur commodi optio fugit quod, libero quisquam obcaecati perferendis vel, harum vero et ad recusandae doloribus aperiam quibusdam ea ipsa eum illo saepe amet. Veniam aspernatur facere vel.</span>
    <span>A illum, deserunt deleniti nihil consectetur ratione distinctio culpa autem perspiciatis cupiditate, doloremque numquam ipsam enim sed officia cum fugiat non neque nesciunt at mollitia fugit. Commodi corporis, eum aliquam.</span>
    <span>Sapiente dignissimos odit earum, unde deserunt alias nesciunt iste quasi officiis sint at cupiditate magnam quis fugiat velit repudiandae delectus veniam recusandae debitis sed ab nostrum eum fuga. Debitis, nobis!</span>
    <span>Optio quibusdam fugit sapiente ipsa praesentium architecto temporibus enim laborum magni aliquam, sed accusamus doloremque necessitatibus, dignissimos, numquam fuga accusantium nihil cupiditate. Accusamus voluptas eum porro dicta, ratione voluptatum nisi.</span>
    <span>Possimus in illum, inventore perspiciatis ab ipsam est magni tempore nemo? Molestiae cumque sint iure? Ipsam rem nihil iste saepe iure, perspiciatis recusandae magni, consequatur sapiente voluptatem quod officiis deserunt.</span>
    <span>Magni dolores hic nostrum mollitia quasi sapiente est modi nulla inventore id iusto aut neque tenetur libero beatae minus similique architecto ipsa consequuntur dignissimos, quae eos voluptate eius in rerum.</span>
    <span>Amet placeat reiciendis soluta autem temporibus, suscipit omnis, et recusandae itaque velit ipsa earum, aliquam, ratione officiis rerum. Ducimus omnis beatae, repudiandae ullam veniam iusto temporibus tempore voluptatem et autem!</span>
    <span>Iure aperiam, accusantium sunt? Eaque velit sed tempore iusto dolorum debitis ullam, error magni, nam labore excepturi consequatur? Dolorem unde, itaque nostrum id ipsam, soluta est rem quas non officia.</span>
    <span>Quisquam vitae, voluptate doloribus fuga voluptatem corporis totam. Aspernatur ullam, corporis vel porro tempora enim dicta. Quo vel quisquam, voluptate earum, deserunt minima, repellendus repudiandae dicta eum officia recusandae qui.</span>
    <span>Eos nisi reprehenderit accusamus repellat voluptates cum cupiditate debitis, molestiae illo, aspernatur tenetur nobis. Rem, aspernatur inventore minus, adipisci magnam eveniet beatae ab ea. Sapiente quo totam iure nisi perspiciatis!</span>
    <span>Cum voluptatem autem, exercitationem magnam, minus cumque alias ipsa rem distinctio. Itaque vel soluta ad quaerat, ullam quos! Laudantium tempora voluptas tenetur vel, ea dignissimos quaerat doloribus, asperiores. Eius, tempora?</span>
    <span>Obcaecati, ipsam libero impedit ut illum molestias sit veritatis eligendi amet blanditiis optio, cupiditate possimus quasi distinctio numquam asperiores, saepe suscipit corporis tenetur quod. Consequatur consectetur voluptatum officia deleniti quos.</span>
    <span>Accusamus ullam illo sit nisi quis rem, non hic repellendus, veritatis recusandae libero quas reiciendis nulla in sapiente. Eius soluta facere inventore assumenda quibusdam repellendus iste mollitia dolor. Soluta, facilis.</span>
    <span>Eveniet dolores id sequi nostrum quas illo ipsam et, est amet voluptatibus commodi impedit ad nulla assumenda iusto, ullam aut accusamus. Dolorum debitis voluptates quae iste reiciendis voluptatum ipsa nulla.</span>
    <span>Nulla nostrum magni eligendi, vitae aut pariatur architecto tempora amet modi iusto cum rem fugit provident atque quisquam animi excepturi. Voluptatem distinctio eveniet totam atque, necessitatibus, dolorem vitae alias deserunt.</span>
    <span>Ullam, cupiditate, autem. Tempora eligendi eaque pariatur, harum similique cumque repellat incidunt cupiditate saepe voluptatum animi fugiat amet fuga illo, in magni neque libero labore ipsam. Accusantium atque magnam deserunt.</span>
    <span>Atque minima, quas labore beatae aliquam dolorem aut debitis sint molestiae, nulla, unde architecto sapiente in suscipit similique. Reprehenderit impedit, deserunt error repellendus magni, pariatur officiis iusto dignissimos facilis explicabo.</span>
    <span>Quod impedit quisquam, similique repudiandae voluptate accusamus nemo reiciendis, ipsum assumenda! Voluptatem recusandae ipsa atque explicabo tempora magnam quo libero impedit necessitatibus adipisci, voluptas at iusto corporis. Nisi, qui excepturi.</span>
    <span>Nihil qui porro, nulla et culpa autem dignissimos enim quam quos eos fugit odio quibusdam tempora cumque neque in unde architecto? Illo iure voluptatum, deleniti, iusto nostrum deserunt aliquam consectetur?</span>
    <span>Similique ab optio recusandae placeat doloremque, eum, et ipsa dignissimos in nisi mollitia? Corporis natus saepe ipsam porro quas similique sed veritatis dolorum quos libero ratione dolores, earum consequatur deleniti.</span>
    <span>Recusandae officia, molestias nostrum omnis, nam eius impedit repellat mollitia. Esse inventore id, maiores tenetur earum molestias placeat ad iste unde repellat odio architecto harum assumenda, accusamus impedit saepe rem.</span>
    <span>Dolor, maxime dignissimos magnam nihil illum delectus itaque. Maiores quibusdam minus nemo molestias, tenetur aperiam sit quam similique dicta dolores, ab libero qui alias, rerum recusandae tempora assumenda natus. Fugiat!</span>
    <span>Voluptatibus corporis, omnis officia facere aperiam, autem eius minus repellat, quia iure delectus excepturi consequuntur atque voluptas consequatur deserunt. Numquam quas facilis similique hic, eius porro consequuntur voluptatibus itaque cumque.</span>
    <span>Incidunt perferendis illo aspernatur soluta quo pariatur, repudiandae, eius rerum distinctio molestiae aliquid voluptas, assumenda eveniet. Architecto molestias tempora, cumque dicta perferendis obcaecati incidunt tempore, ipsum, necessitatibus saepe soluta possimus.</span>
    <span>Corrupti minus dolor iure, minima architecto facilis aliquid quod dolore officia harum! Et est aut maxime odio, inventore rem temporibus labore alias autem totam tempora quidem quaerat, fugiat earum quia!</span>
    <span>Sed hic alias reprehenderit architecto quas quis suscipit est eaque vero molestias. Voluptas asperiores voluptate vitae dolorum vel tenetur mollitia necessitatibus. Autem repellendus eaque aut possimus! Quibusdam alias in voluptatum?</span>
    <span>Itaque in expedita laudantium, amet dignissimos cumque recusandae maiores voluptas blanditiis aliquam voluptatum et. Nobis natus laborum voluptas amet, nostrum pariatur omnis quis optio magnam. Impedit voluptas blanditiis nesciunt. Amet.</span>
    <span>Quas impedit voluptatem itaque perferendis vitae maiores omnis? Esse a quia iusto maxime perspiciatis sapiente alias maiores aliquam ipsum cum id quas provident saepe, voluptas praesentium ut fugiat ab. Quaerat.</span>
    <span>Debitis, dolore. Facere inventore distinctio dolor reiciendis, nulla atque, iure facilis accusantium explicabo, fugit blanditiis non similique corrupti repellat quaerat labore id iste fuga numquam odit dolorum pariatur accusamus ut?</span>
    <span>Dolor vitae perferendis illo dolore ipsam temporibus, provident omnis beatae placeat. Facere rerum consectetur corporis tempora, impedit animi facilis. Architecto dolorem voluptatum aspernatur quisquam, facilis libero eveniet dolore, optio et.</span>
    <span>Ullam suscipit aut eum obcaecati, vero. At, exercitationem. Aliquid sed, facilis, minima error a unde eos vitae nam animi tempore, impedit? Non alias temporibus dicta a similique quod, sequi soluta.</span>
    <span>Ipsam voluptas totam et iusto, sequi dignissimos dolorem tempora repudiandae nihil odit fugit nulla distinctio quis architecto aliquid, voluptate eum! Sequi ipsum, nemo veniam voluptatum inventore illo quod, voluptates possimus.</span>
    <span>Quibusdam ut obcaecati rerum quae. Consectetur officia, nostrum, non placeat beatae, molestias sunt tenetur dolore omnis nisi necessitatibus. Fugit nulla, quasi deleniti excepturi incidunt veritatis aliquid impedit commodi tenetur eius.</span>
    <span>Sint quidem ipsa excepturi quia. Placeat, soluta velit reiciendis officia quae cumque facilis sunt, culpa quisquam eligendi voluptates consectetur? Voluptatibus quas optio magni deserunt sed vitae quae fuga quasi soluta.</span>
    <span>Veniam laborum ea quas deleniti, minus impedit eligendi vel odit minima tempora! Dolores molestias, beatae! Sunt eaque molestias rerum totam voluptatum odio, doloribus mollitia voluptatibus. Officiis itaque dolores amet nisi.</span>
    <span>Odit consequatur fugit tempore dolorem asperiores nam dignissimos totam illum, suscipit optio libero, possimus. Nulla porro laboriosam ducimus praesentium ratione, possimus, totam accusamus quo doloribus iste explicabo delectus aliquid error?</span>
    <span>Sit ex, tenetur neque. Eveniet asperiores maxime libero iusto unde repudiandae, doloremque, fuga officia quisquam impedit minima ad nisi ex delectus nobis, dolor similique quos inventore cum culpa dolorem aperiam.</span>
    <span>Autem, magni velit sit maiores placeat illo voluptates! Molestiae non aliquid provident necessitatibus cupiditate sit facere quis voluptatem, dolorum totam sed asperiores. Esse deserunt blanditiis quaerat! Fugit incidunt quibusdam quos?</span>
    <span>Quibusdam, magni, facilis. Accusantium delectus laboriosam dolores. Consequuntur optio eius quidem, voluptate nesciunt temporibus, dolore dolorem vel magni ratione, ab autem facilis! Sequi eos odio natus beatae dolorem. Molestiae, sit.</span>
    <span>Sapiente tempore ut reprehenderit, fuga neque esse perspiciatis, consequuntur ab ipsum, quia facere recusandae distinctio. Officia ratione, magni aperiam voluptatibus quidem quasi voluptate quod, exercitationem quaerat, veritatis asperiores tenetur in.</span>
    <span>Officia explicabo a minus, consectetur placeat? Magnam doloribus, eligendi eos totam veniam fugit ullam dolor dicta excepturi quam quod sit dolores rerum, fugiat beatae explicabo laborum corrupti obcaecati nulla ipsam.</span>
    <span>Aperiam eligendi quasi numquam quisquam voluptatibus reiciendis esse cupiditate iure, repellat eos nemo temporibus vero dolorem! Sit debitis veniam, repellendus aliquam vero excepturi! Illum, quasi voluptate aperiam nostrum minus quam?</span>
    <span>Sit omnis culpa earum, aliquid eveniet voluptates eum maiores eaque vitae maxime soluta corporis dolores ut, laudantium suscipit quisquam animi distinctio nulla, minus ipsa libero, accusamus natus error necessitatibus. Ratione.</span>
    <span>Iusto praesentium optio, fugit, quasi repellendus cumque voluptatem id ab illo dignissimos ullam facilis magnam aperiam enim labore excepturi at tempora exercitationem molestias perferendis. Rerum, eius nostrum! Laborum, veniam aspernatur.</span>
    <span>Sunt facilis id quae voluptates doloribus fugiat enim repudiandae, aut perspiciatis impedit hic praesentium odio excepturi omnis maiores molestiae delectus suscipit consequatur modi magnam. Minus excepturi quidem sequi laboriosam, suscipit!</span>
    <span>Tempore, aliquam! Vel fugit quia, deleniti qui laboriosam. Est rem rerum eligendi tenetur corporis eius deleniti illo iusto, ipsa nostrum nisi consectetur, molestiae laborum, maxime iste, mollitia incidunt doloribus adipisci.</span>
    <span>Cum accusamus voluptate saepe, autem voluptatem commodi omnis cupiditate amet maiores reprehenderit consequuntur quasi quaerat possimus officiis accusantium corporis nemo harum enim modi perspiciatis quo sed deserunt! Culpa obcaecati, sed?</span>
    <span>Magni suscipit cupiditate eos harum qui mollitia, illo ipsa. Eaque voluptas repellendus, ad harum excepturi, mollitia voluptatem voluptatibus esse nam, pariatur natus. Iusto iure ab, fugit perferendis, neque voluptas architecto.</span>
    <span>Recusandae rem atque facilis nulla officia laborum, similique corrupti vel minima consequatur enim maxime vero eius ex, in unde? Magnam quas eos iusto perspiciatis, cumque blanditiis. Illo quidem aliquid fugit.</span>
    <span>Voluptas perspiciatis facilis, animi accusantium mollitia porro dolor vitae perferendis omnis saepe aliquam nulla, nihil. Tempore quam adipisci earum deleniti ab fuga, tenetur! Animi recusandae id vero doloribus amet, nesciunt.</span>
    <span>Vel voluptatem ullam adipisci autem aliquam impedit ipsum nesciunt iusto hic nulla quibusdam cupiditate ratione suscipit, dolore tempora, exercitationem quae earum assumenda maxime rerum eius dolor dolorum amet. Incidunt, enim?</span>
    <span>Fugiat numquam facere, blanditiis omnis, eaque at, reprehenderit veniam sint iste obcaecati reiciendis officia doloribus tempora id similique nobis suscipit optio ratione nemo cum molestiae error iusto accusantium eius! Ab.</span>
    <span>Aliquam deleniti expedita amet neque laborum odio perferendis ut aut fugit, dolorem, atque impedit dolores reprehenderit reiciendis fugiat eveniet aspernatur eius quibusdam nemo porro similique nulla accusantium rerum incidunt! Ab.</span>
    <span>Commodi unde ea ex cumque sequi delectus facere ipsum molestias vitae magnam ratione sit omnis eius iusto quaerat incidunt sed error, odio in neque aliquam eaque! Aliquid qui eveniet maiores!</span>
    <span>Labore natus reprehenderit tempora nostrum similique maxime hic velit provident iste cum nisi non, assumenda mollitia consequatur temporibus animi et veniam porro iure eaque tempore, ut nemo. Quisquam, et nostrum.</span>
    <span>Aliquid perspiciatis impedit, vel qui sint! Deserunt tempore earum, voluptas laudantium, dolore eligendi fugiat voluptates, ut sint aut repudiandae, commodi nam accusantium voluptatum. Alias excepturi accusamus incidunt eligendi, eaque doloribus.</span>
    <span>Distinctio commodi, ad, animi temporibus, quisquam nostrum minima ullam assumenda natus incidunt quia voluptas vel officia corrupti aperiam a voluptatem inventore, reiciendis deleniti esse consectetur. Cum mollitia excepturi assumenda expedita?</span>
    <span>Cupiditate obcaecati doloremque modi voluptatem repellendus quas harum voluptatibus natus expedita velit doloribus temporibus blanditiis ea eveniet ipsam facere voluptates eius ducimus alias accusamus a error est minima, illo autem!</span>
    <span>Aperiam maxime commodi quas, culpa itaque amet aut pariatur, nihil explicabo quasi dolores ullam autem reprehenderit aliquid nisi quos alias ab! Accusamus error quas reiciendis aperiam. Minima voluptatibus repellendus praesentium!</span>
    <span>Accusantium quod officia ipsum dolorum dolor harum dolores similique dignissimos cumque perspiciatis quaerat ducimus laboriosam iusto animi, illum quia rem repudiandae exercitationem totam ipsa. Fugiat, obcaecati eum natus totam ea!</span>
    <span>Laboriosam nisi odio autem, magnam minus eum perspiciatis distinctio, nam enim neque explicabo, ad placeat dolores asperiores? Alias delectus soluta nam assumenda voluptatem! Minus dolorum, debitis voluptate nihil. Doloribus, ipsum.</span>
    <span>Possimus nisi similique fugit perspiciatis est cumque nihil iusto, delectus ab unde cum suscipit ex debitis magni architecto neque, laboriosam provident exercitationem! Iste sequi inventore minus, eius impedit veritatis, dolorum.</span>
    <span>Labore tenetur cum reiciendis tempora iusto incidunt in expedita tempore inventore. Mollitia consectetur aliquam, est ut. Quam quis commodi molestias voluptatibus ad enim tenetur dicta consectetur itaque quibusdam, doloremque id!</span>
    <span>Tempore accusamus aliquid minima quae provident blanditiis, recusandae quod nostrum voluptatum eum iure eligendi totam id laudantium, esse, neque quas voluptates vero. Blanditiis ipsum accusantium error voluptate ut animi possimus.</span>
    <span>Provident, sed. Culpa quisquam, illo pariatur qui ipsum eos quae quam quo harum aperiam odit temporibus fugiat iusto expedita veniam placeat deleniti reiciendis, consequuntur, provident molestiae aliquam ex. Odio, quas?</span>
    <span>Possimus nostrum laborum tenetur maxime culpa, molestiae velit nemo? Aut amet perferendis, ex ratione blanditiis pariatur quod ab illum illo, libero aliquid necessitatibus soluta iusto dolorem suscipit fugiat minus ipsam.</span>
    <span>Sequi quia, minima repellendus animi numquam voluptatum, aspernatur at provident! Libero ad rem, non minus voluptates corporis incidunt vitae soluta iste quo ab ea sequi consequatur, iusto reprehenderit possimus explicabo!</span>
    <span>Assumenda voluptas rerum rem praesentium sint ad eos, corporis vero eveniet, laborum aspernatur nostrum sapiente consequatur dicta tenetur quam et itaque possimus reprehenderit, nesciunt. Eligendi beatae tenetur error accusamus dolores.</span>
    <span>Illo earum perspiciatis nihil, molestiae cupiditate id ipsam necessitatibus facere consequatur est veniam eius unde sit amet ipsa placeat omnis, at velit voluptate excepturi quia deserunt nulla doloremque! Ipsa, minima.</span>
    <span>Numquam laboriosam, modi praesentium necessitatibus soluta ad. Eius maiores optio soluta et sit maxime beatae odit exercitationem minus, neque non adipisci rem perspiciatis praesentium inventore obcaecati suscipit, at itaque cumque.</span>
    <span>Vel cumque reiciendis tempora facere molestias amet mollitia voluptatibus, ex voluptate laudantium, necessitatibus, ipsum id alias neque ea, veritatis saepe distinctio omnis! Et, iusto quam laudantium necessitatibus! Et, in, reiciendis.</span>
    <span>Excepturi facilis laudantium, asperiores labore doloremque velit, aliquid, quae amet vel, perspiciatis nisi animi? Maiores minus doloremque aut dolorum sunt a doloribus alias repudiandae eius explicabo. Facere commodi veniam, ullam.</span>
    <span>Nisi animi odio laudantium alias dolorem dicta, tempore asperiores impedit maiores dolore, culpa fugit quos voluptatem accusamus neque? Voluptates quisquam quos id temporibus accusamus doloribus eos esse amet inventore necessitatibus.</span>
    <span>Nemo, nobis, nulla. Nemo suscipit iure, molestias, ab qui sit eveniet consequatur nobis nam dolorum in sapiente nihil sunt. Molestiae perspiciatis ab similique, quas eligendi voluptates quasi saepe aspernatur modi.</span>
    <span>Fugiat, labore, iure. Atque nemo facere voluptas. Sed ad, itaque voluptatibus numquam sunt sint dolorum vel quidem, facilis, voluptatum aut enim minus? Consequatur provident vel perspiciatis eius sequi, architecto laborum!</span>
    <span>Voluptatibus voluptate corporis autem iste aspernatur sint atque ut ipsum maiores suscipit minima, cum unde omnis amet sapiente nulla hic vel quaerat nesciunt culpa? Facere optio enim veritatis, distinctio cupiditate!</span>
    <span>Incidunt optio placeat, vel aliquid nobis sit officia adipisci dolorem quam dolorum, nisi quisquam exercitationem ducimus culpa necessitatibus assumenda perspiciatis! Eum officia temporibus deserunt eos recusandae et placeat corrupti maxime.</span>
    <span>Inventore, tenetur, soluta impedit, dolorum exercitationem vel alias eos harum rem placeat aliquid a facilis deserunt ullam culpa commodi labore ratione omnis, ipsum dignissimos eum obcaecati sed. Sint, cumque iusto.</span>
    <span>Ea sequi accusantium, magni asperiores error, cum itaque totam minima laborum modi maxime quidem. Quisquam assumenda quia, mollitia reiciendis similique dolorum quos placeat consequatur aspernatur possimus accusantium nesciunt praesentium ducimus.</span>
    <span>Magni officia eaque reprehenderit sunt aperiam dicta commodi, eveniet maiores nobis sequi nostrum ipsum maxime sapiente temporibus quas, hic dolore ea incidunt reiciendis cupiditate cum vero eum nemo iusto. Dicta.</span>
    <span>Dolore consequatur, vero deleniti mollitia et. Velit veritatis optio soluta maxime cupiditate quisquam, dolorem laudantium explicabo natus error repellendus, eaque culpa quibusdam quasi, dolor odit voluptates illum, illo consectetur molestiae.</span>
    <span>Quo voluptatem facilis sit laudantium debitis soluta molestiae, modi necessitatibus repellat, deserunt, amet consequatur voluptatum eos. Nesciunt rerum quam accusantium, et, unde at veritatis. Itaque tempora labore dolores molestiae autem.</span>
    <span>Laborum modi nemo excepturi quis nesciunt magnam sint placeat deserunt possimus, quod fugiat, repellat unde harum laboriosam porro dolor asperiores hic sed aliquid provident rerum! Perferendis nobis officiis iure ipsum!</span>
    <span>Minima harum praesentium, et quo ex vero incidunt earum at, nostrum consequatur quas aperiam accusamus iusto. Sunt voluptatum dignissimos optio facere esse rem, enim, delectus molestiae officiis accusantium aut, cumque!</span>
    <span>Molestiae, corporis dolorum ipsum consectetur totam officiis nisi voluptatibus ad ullam voluptatem sapiente nulla aspernatur modi similique cupiditate ea autem, eligendi, ab culpa pariatur iure. Nemo molestiae commodi, hic a!</span>
    <span>Ut dolore voluptatibus necessitatibus assumenda hic ab, nobis deserunt inventore maxime. Incidunt ipsa illum veniam ipsam, hic ratione mollitia quidem nisi corporis nihil maiores quasi fuga accusantium, enim, natus dolore.</span>
    <span>Tenetur perferendis possimus minus repellendus, quis dolores, labore temporibus reiciendis nostrum, rerum distinctio alias, non vitae tempore. Temporibus, iste dicta suscipit pariatur. Perferendis incidunt perspiciatis ut adipisci ullam! Non, quidem.</span>
    <span>Facilis officia dignissimos quisquam? Dicta magni, pariatur esse, aperiam facilis tempora similique ducimus consectetur, unde provident sunt quisquam recusandae veniam architecto! Maxime accusamus, facilis repudiandae pariatur inventore in debitis labore!</span>
    <span>Recusandae, nesciunt, eos. Adipisci sequi neque laudantium mollitia nemo! Officia totam, expedita reiciendis molestias harum debitis magnam minus, ipsa odit ipsum? Quasi, numquam commodi dolorem dolor sunt fuga deserunt eligendi.</span>
    <span>Animi placeat iste, nobis molestias in fugit sunt. Officiis vel nobis itaque ratione asperiores quaerat ipsam ullam porro quod, nisi debitis officia impedit quo reiciendis quidem dolorum, quibusdam aperiam neque.</span>
  </p>


</section>
            
          
!
            
              section{
  box-sizing : border-box;
  background-color: silver;
  position: fixed;
  z-index: -1;
  opacity: 0;
  padding: 30px;
  overflow-x: hidden;
  overflow-y: auto;
  top:0;
  right:0;
  bottom:0;
  left:0;
  transition  : opacity 0.6s ease;
}
input[type=button]{
  background-color: rgb(50,50,50);
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}
.bt{
  cursor : pointer;
  font-size: 4rem;
  font-weight: bold;
}
.open{
  overflow: hidden;
}
img{
  max-width: 100%;
}

/* pour le contenu de la page */ 
p{
  margin: 10px;
}


            
          
!
            
              (function(){
  var section = document.querySelectorAll("section")[0];
  var body = document.querySelector("body");
  var btOpen = document.querySelectorAll("input")[0];
  var btClose = document.querySelectorAll(".bt")[0];
  function ouvrir(){
    section.style.zIndex = 1;
    section.style.opacity = 1;
    body.className = "open";
  }
  function fermer(){
    section.style.opacity = 0;
    window.setTimeout(
      function(){
        section.style.zIndex = -1;
        body.className = "";
      }
      ,600
    ) 
  }
  btOpen.addEventListener("click",ouvrir,false);
  btClose.addEventListener("click",fermer,false);
}).call(this);

            
          
!
999px
Loading ..................

Console