Infinite Popup

HTML

1. Add the class ".popup-trigger" to the element that will open the popup.

<div class="popup-trigger">Load Popup</div>

2. Reference your popup content file.

<div class="popup-trigger" data-file="folder/file1.html">Load Popup</div>

3. Optional - change the popup style.

<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.

<div class="popup-close">Close Popup</div>

CSS

.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.

<script src="js/javascript.latest.js"></script> // 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(); }); });