Last active
April 20, 2016 13:47
-
-
Save omeha2/3bf12316532ed0e2d59bcaf8b11ed3c3 to your computer and use it in GitHub Desktop.
Box with 3 buttons, each have small popup
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
<div class="bc_links_wrap"> | |
<div class="bc_overlay bc_overlay_1"> | |
<div class="bc_overlay_inner"> | |
<h2>Our Phone is</h2> | |
<p>(666)highway-to-hell</p> | |
</div> | |
<div class="bc_overlay_close"></div> | |
</div> | |
<div class="bc_overlay bc_overlay_2"> | |
<div class="bc_overlay_inner"> | |
<h2>Our Email is</h2> | |
<p>test@test.com</p> | |
</div> | |
<div class="bc_overlay_close"></div> | |
</div> | |
<div class="bc_overlay bc_overlay_3"> | |
<div class="bc_overlay_inner"> | |
<h2>Chat?</h2> | |
</div> | |
<div class="bc_overlay_close"></div> | |
</div> | |
<div class="bc_link bc_link_chat" data-bc-popuid="3"><img src="http://virtualsummitmastery.com/wp-content/uploads/icon-chat.png"></div> | |
<div class="bc_link bc_link_phone" data-bc-popuid="1"><img src="http://virtualsummitmastery.com/wp-content/uploads/icon-phone.png"></div> | |
<div class="bc_link bc_link_email" data-bc-popuid="2"><img src="http://virtualsummitmastery.com/wp-content/uploads/icon-email.png"></div> | |
</div> | |
<script> | |
jQuery(function($){ | |
$('.bc_link').click(function(){ | |
var id = $(this).attr('data-bc-popuid'); | |
jQuery('.bc_overlay_'+id).fadeIn(500); | |
}); | |
$('.bc_overlay_close').click(function(){ | |
jQuery('.bc_overlay').fadeOut(500); | |
}); | |
}); | |
</script> |
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
/* Global CSS */ | |
.bc_links_wrap{ | |
position: relative; | |
} | |
.bc_links_wrap:after{ | |
content: ""; | |
clear: both; | |
display: table; | |
} | |
.bc_overlay{ | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
background: rgba(255,255,255,0.8); | |
display: none; | |
z-index: 1; | |
} | |
.bc_overlay_close { | |
position: absolute; | |
width: 50px; | |
height: 50px; | |
background-color: #333; | |
border-radius: 50px; | |
right: -25px; | |
top: -25px; | |
background-image: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCIgdmlld0JveD0iMCAwIDQxLjc1NiA0MS43NTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQxLjc1NiA0MS43NTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMjcuOTQ4LDIwLjg3OEw0MC4yOTEsOC41MzZjMS45NTMtMS45NTMsMS45NTMtNS4xMTksMC03LjA3MWMtMS45NTEtMS45NTItNS4xMTktMS45NTItNy4wNywwTDIwLjg3OCwxMy44MDlMOC41MzUsMS40NjUgICBjLTEuOTUxLTEuOTUyLTUuMTE5LTEuOTUyLTcuMDcsMGMtMS45NTMsMS45NTMtMS45NTMsNS4xMTksMCw3LjA3MWwxMi4zNDIsMTIuMzQyTDEuNDY1LDMzLjIyYy0xLjk1MywxLjk1My0xLjk1Myw1LjExOSwwLDcuMDcxICAgQzIuNDQsNDEuMjY4LDMuNzIxLDQxLjc1NSw1LDQxLjc1NWMxLjI3OCwwLDIuNTYtMC40ODcsMy41MzUtMS40NjRsMTIuMzQzLTEyLjM0MmwxMi4zNDMsMTIuMzQzICAgYzAuOTc2LDAuOTc3LDIuMjU2LDEuNDY0LDMuNTM1LDEuNDY0czIuNTYtMC40ODcsMy41MzUtMS40NjRjMS45NTMtMS45NTMsMS45NTMtNS4xMTksMC03LjA3MUwyNy45NDgsMjAuODc4eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo="); | |
background-repeat: no-repeat; | |
background-position: 50% 50%; | |
} | |
.bc_overlay_inner{ | |
position: absolute; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-moz-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
text-align: center; | |
width: 100%; | |
} | |
.bc_link img{ | |
display: block; | |
} | |
.bc_link_phone{ | |
float: right; | |
} | |
.bc_link_chat{ | |
float: left; | |
} | |
.bc_link_email{ | |
position: absolute; | |
left: 50%; | |
transform: translateX(-50%); | |
} | |
@media only screen and (max-width: 600px){ | |
.bc_link{ | |
float: none; | |
text-align: center; | |
position: relative; | |
} | |
.bc_link img { | |
display: block; | |
margin: 10px auto; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment