HTML
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" id="customSvgLibrary">
<symbol id="info-icon"><path fill="#fff" d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></symbol>
<symbol id="close-icon"><path fill="#000" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></symbol>
<symbol id="close-map"><path fill="#fff" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></symbol>
</svg>
<div class="map-thumb-box">
<div class="map-thumb map-thumb-btn"><img src="https://images.unsplash.com/photo-1485518994577-6cd6324ade8f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=944&q=80"/></div>
<!-- Open Map Content -->
<div class="big-map">
<div class="main-image-box">
<img src="https://images.unsplash.com/photo-1485518994577-6cd6324ade8f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=944&q=80"/>
<div class="click-dot dot-1">
<svg class="click-btn"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#info-icon"></use></svg>
<div class="load-content">
<h2>Info Title</h2>
<div class="info-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquet lacinia ipsum sed mattis. Proin sodales arcu sit amet risus accumsan, eu tristique purus dapibus. Aenean hendrerit, magna at hendrerit iaculis, urna dui eleifend arcu, quis tempor eros urna ut mauris. Nam faucibus, lectus viverra malesuada volutpat, purus felis tincidunt lacus, non lobortis augue turpis et neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam commodo pharetra mauris eu pellentesque. Donec quis massa eget urna viverra accumsan a ac magna. Phasellus a leo placerat, porta libero in, dapibus lacus. In pellentesque bibendum semper.
</div>
</div>
</div>
<div class="click-dot dot-2">
<svg class="click-btn"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#info-icon"></use></svg>
<div class="load-content">
<h2>What kind of a father would I be if I said no?</h2>
<div class="info-copy">
<p>We can't compete with Mom! Her company is big and evil! Ours is small and neutral! I meant 'physically'. Look, perhaps you could let me work for a little food? I could clean the floors or paint a fence, or service you sexually?</p>
<p>Of all the friends I've had… you're the first. Okay, I like a challenge. And until then, I can never die? Oh, I don't have time for this. I have to go and buy a single piece of fruit with a coupon and then return it, making people wait behind me while I complain.</p>
</div>
</div>
</div>
<div class="click-dot dot-3">
<svg class="click-btn"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#info-icon"></use></svg>
<div class="load-content">
<h2>Fry! Stay back! He's too powerful!</h2>
<div class="info-copy">
<p>Bite my shiny metal ass. No. We're on the top. Can we have Bender Burgers again? The alien mothership is in orbit here. If we can hit that bullseye, the rest of the dominoes will fall like a house of cards. Checkmate.</p>
<p>Son, as your lawyer, I declare y'all are in a 12-piece bucket o' trouble. But I done struck you a deal: Five hours of community service cleanin' up that ol' mess you caused. Five hours? Aw, man! Couldn't you just get me the death penalty?</p>
<p>Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew. How much did you make me? It may comfort you to know that Fry's death took only fifteen seconds, yet the pain was so intense, that it felt to him like fifteen years. And it goes without saying, it caused him to empty his bowels.</p>
</div>
</div>
</div>
<div class="close-map close-map-btn"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close-map"></use></svg></div>
</div>
</div>
<!-- Close Map Content -->
</div>
<div class="map-overlay">
<div class="main-container">
<!-- Each Map Loads Here -->
</div>
</div>
<div class="info-overlay">
<div class="info-overlay-box">
<div class="info-main">
<div class="info-load-target">
<!-- Each Info Link Loads Here -->
<div class="load-content">
<h2>Default Title</h2>
<div class="info-copy">
Default Copy
</div>
</div>
</div>
<div class="close-info close-info-btn"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close-icon"></use></svg></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
CSS
body{
margin: 0;
padding: 0;
background-color: #1e1e1e;
font-family: 'Noto Sans JP', sans-serif;
color: #333;
}
.map-overlay{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 999;
}
.map-thumb-box{
display: flex;
position: relative;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100vh;
color: #fff;
cursor: pointer;
}
.map-thumb-box .big-map{
display: none;
text-align: center;
}
.map-thumb img{
max-width: 320px;
height: auto;
}
.main-container{
display: flex;
position: fixed;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100vh;
}
.main-image-box{
display: block;
position: relative;
margin: 0 auto;
max-width: calc(100% - 40px);
}
.main-image-box img{
width: 100%;
height: auto;
border-style: solid;
border-width: 1px;
border-color: #444444;
box-shadow: 0px 0px 11px black;
max-width: 100vh;
}
.click-dot{
display: block;
position: absolute;
width: 24px;
height: 24px;
opacity: 0.6;
cursor: pointer;
transition: all 0.5s;
padding: 10px;
}
.click-dot:hover{
opacity: 1;
}
.load-content{
display: block;
}
.click-dot .load-content{
display: none;
}
.click-dot svg{
width: 28px;
height: 28px;
}
.dot-1{
top: 9%;
left: 6%;
}
.dot-2{
top: 54%;
left: 11%;
}
.dot-3{
top: 54%;
left: 89%;
}
.info-overlay{
display: none;
position: fixed;
z-index: 999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
}
.info-overlay-box{
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
height: 100vh;
}
.info-main{
display: none;
position: relative;
max-width: 960px;
width: calc(100% - 40px);
background-color: #fff;
color: #333;
}
.info-main h2{
margin: 0;
margin: 0 20px 10px 20px;
padding: 10px 0 0 0;
border-style: solid;
border-width: 0 0 1px 0;
border-color: #333;
}
.info-copy{
padding: 0 20px 20px 20px;
}
.close-info{
display: none;
position: absolute;
top: 10px;
right: 10px;
z-index: 999;
cursor: pointer;
}
.close-info svg{
width: 24px;
height: 24px;
}
.close-map{
display: block;
position: absolute;
top: -12px;
right: -12px;
width: 24px;
height: 24px;
cursor: pointer;
}
.close-map svg{
width: 24px;
height: 24px;
}
JAVASCRIPT
$( document ).ready(function() {
$( '.map-thumb-btn' ).click(function() {
$( '.map-overlay' ).fadeIn(500);
$('.main-container').empty();
$(this).parent().find('.big-map').clone().appendTo(".main-container");
});
$( '.main-container' ).delegate(".close-map-btn", "click", function(){
$( '.map-overlay' ).fadeOut(500);
});
$( '.main-container' ).delegate(".click-btn", "click", function(){
$('.info-load-target').empty();
$(this).parent().find('.load-content').clone().appendTo(".info-load-target");
$( '.info-overlay' ).fadeIn();
$( '.info-main' ).delay(500).fadeIn();
$( '.close-info-btn' ).delay(1000).fadeIn();
});
$( '.info-overlay' ).delegate(".close-info-btn", "click", function(){
$( '.close-info-btn' ).fadeOut(500);
$( '.info-overlay' ).delay(500).fadeOut(500);
$( '.info-main' ).fadeOut();
$( '.close-info-btn' ).fadeIn();
});
});
window.document.onkeydown = function (e) {
if (!e) e = event;
if (e.keyCode == 27) {
$( '.close-info-btn' ).fadeOut(500);
$( '.info-overlay' ).delay(500).fadeOut(500);
$( '.info-main' ).fadeOut();
$( '.close-info-btn' ).fadeIn();
}
};z
2 Responses