Infinite Popup
HTML
1. Add the class ".popup-trigger" to the element that will open the popup.
<![CDATA[
<div class="popup-trigger">Load Popup</div>
]]>
2. Reference your popup content file.
<![CDATA[
<div class="popup-trigger" data-file="folder/file1.html">Load Popup</div>
]]>
3. Optional - change the popup style.
<![CDATA[
<div class="popup-trigger" data-file="folder/file2.html" data-type="dialog">Load Popup</div>
<div class="popup-trigger" data-file="folder/file3.html" data-type="full">Load Popup</div>
]]>
Samples:
4. Add the ".popup-close" class to any element in your content that you want to close the popup.
<![CDATA[
<div class="popup-close">Close Popup</div>
]]>
CSS
<![CDATA[
.popup-scrolloff {
overflow-y:hidden;
overflow-x:hidden;
padding-right: 1.25em;
}
.popup-blur {
transition: all .2s ease;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 9999999;
overflow: hidden;
}
.popup,
.popup * {
box-sizing: border-box;
}
.popup-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
}
.popup-wrap {
position: absolute;
top: .5em;
left: .5em;
width: calc(100% - 1em);
height: calc(100% - 1em);
overflow: hidden;
background: #fff;
z-index: 2;
}
.popup-close {
cursor: pointer;
}
.popup-close-icon {
position: absolute;
top: .5em;
right: .5em;
width: 1em;
height: 1em;
color: #000;
opacity: .3;
}
.popup-close-icon:hover,
.popup-close-icon:active,
.popup-close-icon:focus {
opacity: 1;
}
.popup-close-icon:before, .popup-close-icon:after {
position: absolute;
left: .45em;
content: ' ';
height: 1em;
width: 2px;
background: #000;
}
.popup-close-icon:before {
transform: rotate(45deg);
}
.popup-close-icon:after {
transform: rotate(-45deg);
}
.popup-content {
position: relative;
width: calc(100% - 1.45em);
max-height: calc(100% - 3em);
margin: 2em .5em 1em 1em;
padding: 0 1em 0 0;
overflow: auto;
}
.popup-trigger {
cursor: pointer;
}
.popup-dialog {
height: auto;
max-height: calc(100% - 1em);
}
@media only screen and (min-width:48em) {
.popup-wrap {
position: relative;
left: auto;
margin: 0 auto;
max-width: 900px;
}
.popup-dialog {
max-width: 700px;
}
.popup-full {
max-width: 100% !important;
}
}
]]>
JavaScript
Make sure you load JQuery first.
<![CDATA[
<script src="js/javascript.latest.js"></script>
]]>
<![CDATA[
// Nicholas Graf - 14.11.2015
// Body Override when Popup is open
function bodyChk(){
if ( $('.popup').length ){
$('body').addClass('popup-scrolloff');
$('body > div').not('.popup').addClass('popup-blur');
} else {
$('body').removeClass('popup-scrolloff');
$('.blur').removeClass('popup-blur');
}
}
// Popup Logic
function loadPopup(f,t){
// Count existing .popup elements
var popupCount = $('.popup').length;
// Add 1 to that number
var popupNum = popupCount + 1;
// Create a unique class using the new number
var popupClass = 'popup' + popupNum;
// Append the body with a popup that has the unique class name
$('body').append(
'<div class="popup ' + popupClass + '">'+
' <div class="popup-overlay"></div>'+
' <div class="popup-wrap">'+
' <div class="popup-close-icon popup-close" title="Close"></div>'+
' <div class="popup-content">'+
' </div>'+
' </div>'+
'<!-- END .popup -->'+
'</div>'
);
// Check for popup type
if ( t === 'dialog' ){
$('.' + popupClass + ' .popup-wrap').addClass('popup-dialog');
} else if ( t === 'full' ){
$('.' + popupClass + ' .popup-wrap').addClass('popup-full');
}
// Check for file reference
if ( f === '' ) {
// Add the unique popup class to this popup's close buttons for popup close targeting
$('.' + popupClass + ' .popup-close').addClass(popupClass);
// Show the popup
$('.popup.' + popupClass).fadeIn('fast');
} else {
// Load the popup content from the file reference to .popup-content
$('.' + popupClass + ' .popup-content').load(f,function(){
// Add the unique popup class to this popup's close buttons for popup close targeting
$('.' + popupClass + ' .popup-close').addClass(popupClass);
});
// Show the popup
$('.popup.' + popupClass).fadeIn('fast');
}
}
// Open Popup
$(document).on('click','.popup-trigger',function(){
// Popup Content File Location
var popupContent = $(this).attr('data-file');
var popupType = $(this).attr('data-type');
loadPopup(popupContent,popupType);
bodyChk();
});
// Close Popup
$(document).on('click','.popup-close',function(){
// Locate unique popup class name
var popupTarget = $(this).attr('class').split(' ').pop();
// Hide this popup and delete it
$('.popup.' + popupTarget).fadeOut('fast', function() {
$(this).remove();
bodyChk();
});
});
// Close Popup on Overlay Click (Optional)
$(document).on('click','.popup-overlay',function(){
// Locate unique popup class name
var popupTarget = $(this).parent().attr('class').split(' ').pop();
// Hide this popup and delete it
$('.popup.' + popupTarget).fadeOut('fast', function() {
$(this).remove();
bodyChk();
});
});
]]>