CodePen

HTML

            
              

<a href="#first-popup" class="first-popup-link">Open first popup</a>
<a href="#second-popup" class="second-popup-link">Open second popup</a>


<!-- Contents of first window -->
<div id="first-popup" class="mfp-hide white-popup">
  First window<br/>  
  <a href="#second-popup" class="second-popup-link">Wanna open second?</a>
</div>

<!-- Contents of second window -->
<div id="second-popup" class="mfp-hide white-popup">Second window<br/>
<a href="#first-popup" class="first-popup-link">Get back to first?</a>
</div>

            
          
!

CSS

            
              .white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('.first-popup-link, .second-popup-link').magnificPopup({
  closeBtnInside:true
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................