GitBucket
4.21.2
Toggle navigation
Snippets
Sign in
Files
Branches
1
Releases
Issues
Pull requests
Labels
Priorities
Milestones
Wiki
Forks
mark.george
/
modal-test
Browse code
Minor fixes.
master
1 parent
af996e7
commit
e62951416ab6e3e2fe7f20c42deb07a4694f06a9
Mark George
authored
on 27 Aug 2018
Patch
Showing
2 changed files
css/modal.css
popup_test.html
Ignore Space
Show notes
View
css/modal.css
#content { width:800px; margin:auto; } .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; width: 15rem; border-radius: 0.5rem; } .modal-content img { width: 14.5rem; } .close-button { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray; } .close-button:hover { background-color: darkgray; } .show-modal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; }
.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transform: scale(1.1); transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s; } .modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 1rem 1.5rem; width: 15rem; border-radius: 0.5rem; } .modal-content img { width: 14.5rem; } .close-button { float: right; width: 1.5rem; line-height: 1.5rem; text-align: center; cursor: pointer; border-radius: 0.25rem; background-color: lightgray; } .close-button:hover { background-color: darkgray; } .show-modal { opacity: 1; visibility: visible; transform: scale(1.0); transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s; }
Ignore Space
Show notes
View
popup_test.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/modal.css"> <script type="text/javascript" src="js/modal.js"></script> </head> <body> <div id="content"> <img id="moaImg" src="images/moa.jpg" alt="Moa" style="width:100%;max-width:395px" onclick="popup('moaModal')"> <!-- The Moa Modal --> <div id="moaModal" class="modal"> <div class="modal-content"> <span class="close-button">×</span> <h4 align="center">SOUTHERN LAND, SOUTHERN PEOPLE</h4> <div class="caption">Visitors to Southern Land, Southern People are greeted by the Overlander – a life-size model of a Māori man dressed for overland travel in the sometimes adverse climate of southern New Zealand. A semi-circle of iconic southern objects surrounds the gallery entrance, including a distinctive Moeraki boulder, a mounted takahē and a gold nugget. Above your head, the night sky twinkles as it would have in October 950AD – the date, according to some traditions, of Māori arrival in New Zealand.</div> <img src="images/moa.jpg" alt="Moa"> <a href="http://otagomuseum.nz/whats-on/see/gallery/southern-land-southern-people" itemprop="url"><span itemprop="name">Visit the museum site for more info</span></a> </div> </div> <img id="badgerImg" src="images/badger.jpg" alt="Badger" style="width:100%;max-width:395px" onclick="popup('badgerModal')"> <!-- The Badger Modal --> <div id="badgerModal" class="modal"> <div class="modal-content"> <span class="close-button">×</span> <h4 align="center">HONEY BADGER</h4> <div class="caption">The honey badger (Mellivora capensis), also known as the ratel (/ˈreɪtəl/ or /ˈrɑːtəl/),[3] is the only species in the mustelid subfamily Mellivorinae and its only genus Mellivora. It is native to Africa, Southwest Asia, and the Indian subcontinent. Despite its name, the honey badger does not closely resemble other badger species; instead, it bears more anatomical similarities to weasels. It is classed as Least Concern rather than a threatened species by the IUCN owing to its extensive range and general environmental adaptations. It is primarily a carnivorous species and has few natural predators because of its thick skin and ferocious defensive abilities.</div> <img src="images/badger.jpg" alt="Honey Badger"> <a href="http://otagomuseum.nz/whats-on/see/gallery/southern-land-southern-people" itemprop="url"><span itemprop="name">Visit the museum site for more info</span></a> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/modal.css"> <script src="js/modal.js"></script> </head> <body> <img id="myImg" src="images/moa.jpg" alt="Moa" style="width:100%;max-width:300px" onclick="popup('moaModal')"> <!-- The Modal --> <div id="moaModal" class="modal"> <div class="modal-content"> <span class="close-button">×</span> <h4 align="center">SOUTHERN LAND, SOUTHERN PEOPLE</h4> <div class="caption">Visitors to Southern Land, Southern People are greeted by the Overlander – a life-size model of a Māori man dressed for overland travel in the sometimes adverse climate of southern New Zealand. A semi-circle of iconic southern objects surrounds the gallery entrance, including a distinctive Moeraki boulder, a mounted takahē and a gold nugget. Above your head, the night sky twinkles as it would have in October 950AD – the date, according to some traditions, of Māori arrival in New Zealand.</div> <a href="http://otagomuseum.nz/whats-on/see/gallery/southern-land-southern-people" itemprop="url"><span itemprop="name">Visit the museum site for more info</span></a> <img src="images/moa.jpg" alt="Moa"> </div> </div> <img id="myImg" src="images/badger.jpg" alt="Badger" style="width:100%;max-width:300px" onclick="popup('badgerModal')"> <!-- The Modal --> <div id="badgerModal" class="modal"> <div class="modal-content"> <span class="close-button">×</span> <h4 align="center">HONEY BADGER</h4> <div class="caption">The honey badger (Mellivora capensis), also known as the ratel (/ˈreɪtəl/ or /ˈrɑːtəl/),[3] is the only species in the mustelid subfamily Mellivorinae and its only genus Mellivora. It is native to Africa, Southwest Asia, and the Indian subcontinent. Despite its name, the honey badger does not closely resemble other badger species; instead, it bears more anatomical similarities to weasels. It is classed as Least Concern rather than a threatened species by the IUCN owing to its extensive range and general environmental adaptations. It is primarily a carnivorous species and has few natural predators because of its thick skin and ferocious defensive abilities.</div> <a href="http://otagomuseum.nz/whats-on/see/gallery/southern-land-southern-people" itemprop="url"><span itemprop="name">Visit the museum site for more info</span></a> <img src="images/badger.jpg" alt="Honey Badger"> </div> </div> </body> </html>
Show line notes below
GitBucket
4.21.2
GitBucket
4.21.2