You have to initialize the jQuery library before any Js library,

so

First comes jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Then comes magnific popup library

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.magnific-popup/0.9.9/magnific-popup.css">
<script src="//cdn.jsdelivr.net/jquery.magnific-popup/0.9.9/jquery.magnific-popup.min.js"></script>

Initialize the pop-up script and make it Dom-ready

$(document).ready(function() {
    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true
    });
});

HTML

<div class="container-fluid">
    <div class="row no-gutter">
        <div class="col-lg-4 col-sm-6">
            <a href="#test-popup" class="portfolio-box open-popup-link">
                <img src="img/portfolio/1.jpg" class="img-responsive" alt="">
                <div class="portfolio-box-caption">
                    <div class="portfolio-box-caption-content">
                        <div class="project-name">
                            Title
                        </div>
                        <div class="project-category text-faded">
                            Click to View
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div id="test-popup" class="white-popup mfp-hide">
            Popup content
        </div>
    </div>
</div>

Fiddle