-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
47 additions
and
169 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,190 +1,68 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
|
|
||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <style> | ||
| function popupOpenClose(popup) { | ||
|
|
||
| /* Add div inside popup for layout if one doesn't exist */ | ||
| if ($(".wrapper", popup).length == 0) { | ||
| $(popup).wrapInner("<div class='wrapper'></div>"); | ||
| } | ||
|
|
||
| /* Open popup */ | ||
| $(popup).show(); | ||
|
|
||
| /* Close popup if user clicks on background */ | ||
| $(popup).click(function(e) { | ||
| if (e.target == this) { | ||
| if ($(popup).is(':visible')) { | ||
| $(popup).hide(); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| /* Close popup and remove errors if user clicks on cancel or close buttons */ | ||
| $(popup).find(".popup-btn-close").on("click", function() { | ||
| if ($(".formElementError").is(':visible')) { | ||
| $(".formElementError").remove(); | ||
| } | ||
| $(popup).hide(); | ||
| }); | ||
| } | ||
|
|
||
| $(document).ready(function() { | ||
| $(".popup-trigger").on("click", function() { | ||
| var target = $(this).data('target'); | ||
| popupOpenClose($(target)); | ||
| }); | ||
| }); | ||
|
|
||
|
|
||
| /* this was actually some kind of LESS or SASS/SCSS originally. | ||
| I just stripped out the unnecessary parts, but no changes were necessary */ | ||
| html, | ||
| body { | ||
| width: 100%; | ||
| height: 100%; | ||
| padding: 0; | ||
| margin: 0; | ||
| position: relative; | ||
| <!-- Global site tag (gtag.js) - Google Analytics --> | ||
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-1880635-1"></script> | ||
| <script> | ||
| window.dataLayer = window.dataLayer || []; | ||
| function gtag(){dataLayer.push(arguments);} | ||
| gtag('js', new Date()); | ||
|
|
||
| gtag('config', 'UA-1880635-1'); | ||
| </script> | ||
|
|
||
| <title>Tennesee's Geology Project</title> | ||
| <LINK REL=STYLESHEET TYPE="text/css" HREF="http://orcasound.net/lwcbooth/booth-style.css"> | ||
|
|
||
| <script> | ||
| var currentPlayer; | ||
| function Solo(soundobj) { | ||
| var thissound=document.getElementById(soundobj); | ||
| if(currentPlayer && currentPlayer != thissound) { | ||
| currentPlayer.pause(); | ||
| } | ||
| if (thissound.paused) | ||
| thissound.play(); | ||
| else | ||
| thissound.pause(); | ||
| thissound.currentTime = 0; | ||
| currentPlayer = thissound; | ||
| } | ||
| </script> | ||
|
|
||
| .popup-trigger { | ||
| display: block; | ||
| margin: 0 auto; | ||
| padding: 20px; | ||
| max-width: 260px; | ||
| background: #4EBD79; | ||
| color: #fff; | ||
| font-size: 18px; | ||
| font-weight: 700; | ||
| text-align: center; | ||
| text-transform: uppercase; | ||
| line-height: 24px; | ||
| cursor: pointer; | ||
| } | ||
| </head> | ||
|
|
||
| body { | ||
| background-color: #E3E3E3; | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| margin: auto; | ||
| height: 240px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| h1, | ||
| p, | ||
| h2, | ||
| button { | ||
| font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; | ||
| font-weight: 100; | ||
| letter-spacing: 0.5px; | ||
| } | ||
| <body> | ||
|
|
||
| h1 { | ||
| font-size: 40px; | ||
| text-align: center; | ||
| color: #666666; | ||
| margin: 0 0 30px 0; | ||
| } | ||
| <audio id="place_1"> | ||
| <source src="place1.mp3" type="audio/mpeg" /> | ||
| </audio> | ||
| <audio id="place_2"> | ||
| <source src="place2.mp3" type="audio/mpeg" /> | ||
| </audio> | ||
|
|
||
| p { | ||
| color: #666666; | ||
| margin: 30px auto; | ||
| text-align: center; | ||
| font-size: 16px; | ||
| } | ||
| <!-- To generate x,y pairs for image map shapes, try this site: https://www.image-map.net/ --> | ||
|
|
||
| .popup { | ||
| background: rgba(100, 100, 100, 0.6); | ||
| position: fixed; | ||
| display: none; | ||
| z-index: 5000; | ||
| height: 100%; | ||
| width: 100%; | ||
| left: 0; | ||
| top: 0; | ||
| } | ||
| <div overflow: hidden;> | ||
|
|
||
| .popup>div { | ||
| border-radius: 10px; | ||
| position: fixed; | ||
| background: #FFFFFF; | ||
| box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3); | ||
| padding: 30px 15px; | ||
| /* Width of popup can be changed */ | ||
| width: 70%; | ||
| max-width: 600px; | ||
| z-index: 5001; | ||
| -moz-transform: translate(-50%, -50%); | ||
| -ms-transform: translate(-50%, -50%); | ||
| -webkit-transform: translate(-50%, -50%); | ||
| transform: translate(-50%, -50%); | ||
| left: 50%; | ||
| top: 50%; | ||
| text-align: left; | ||
| border: 5px solid #f28920; | ||
| } | ||
| <img src="2022_cruisesMap.jpg" width="1920" height="1080" usemap="#local"> | ||
|
|
||
| .popup-btn-close { | ||
| position: absolute; | ||
| background-color: #f28920; | ||
| color: white; | ||
| top: -15px; | ||
| right: -15px; | ||
| border-radius: 50%; | ||
| width: 30px; | ||
| height: 30px; | ||
| line-height: 30px; | ||
| text-align: center; | ||
| font-size: 20px; | ||
| font-weight: bold; | ||
| font-family: 'Arial Black', Arial, sans-serif; | ||
| cursor: pointer; | ||
| -webkit-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1); | ||
| -moz-box-shadow: -4px -2px 6px 0px rgba(0, 0, 0, 0.1); | ||
| box-shadow: -3px 1px 6px 0px rgba(0, 0, 0, 0.1); | ||
| } | ||
| <map name="local"> | ||
|
|
||
| .popup-btn-close:hover { | ||
| background-color: #ac5918; | ||
| color: #fff; | ||
| } | ||
| <area shape="poly" coords="0,0,00,100, 100, 200, 0,200, 0,0" onClick="Solo('place1'); return true;" target="player" /> | ||
|
|
||
| .popup-text { | ||
| background: #fff; | ||
| color: #333; | ||
| font-size: 19px; | ||
| line-height: 30px; | ||
| z-index: 9999; | ||
| } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | ||
| <div class="container"> | ||
| <h1>Responsive Popup</h1> | ||
| <a class="popup-trigger" data-target="#popup1">Open PopUp 1</a> | ||
| <a class="popup-trigger" data-target="#popup2">Open PopUp 2</a> | ||
| </div> | ||
| <area shape="rect" coords="500, 0, 1000, 500" onClick="Solo('place2'); return true;" target="player" /> | ||
|
|
||
|
|
||
| </map> | ||
|
|
||
| <div id="popup1" class="popup"> | ||
| <div class="popup-text">This is my popup 1</div> | ||
| <span class="popup-btn-close">×</span> | ||
| </div> | ||
| <div id="popup2" class="popup"> | ||
| <div class="popup-text">This is my popup 2</div> | ||
| <span class="popup-btn-close">×</span> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> | ||
|
|
||
| </html> | ||
|
|