CodePen

HTML

            
              <a id="open-popup" href="#my-popup">Open popup</a>

<div id="my-popup" class="mfp-hide white-popup">
  Inline popup, try to close me
</div>
            
          
!

CSS

            
              #open-popup {padding:20px}
.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

            
              $('#open-popup').magnificPopup({
  type:'inline',
  callbacks: {
    open: function() {
      
      
     // this part overrides "close" method in MagnificPopup object
      $.magnificPopup.instance.close = function () {
      
          if (!confirm("Are you sure?")) {
              return;
          }
      
           // "proto" variable holds MagnificPopup class prototype
           // The above change that we did to instance is not applied to the prototype, 
           // which allows us to call parent method:
           $.magnificPopup.proto.close.call(this);
      }; 
      // you may override any method like so, just note that it's applied globally
      
    }
  }
});


            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................