Magnific弹出窗口无法正常工作

Question

我正在尝试使用Magnific popup在漂亮的方框中显示div内容。 我阅读了文档，我认为我做的一切都是正确的。但结果不是我想要的，我得到的结果是一个蓝色边框，而不是一个漂亮的盒子与我的div的内容。我做错了什么？

HTML：

<section id="news-container">
    <div id="news-body">
        <div id="news-content">  
             <article>
                <img src="image1.png" /> 
                 <a href="#first-popup" class="popup-link">Title 1</a>                                 <div id="first-popup" class="mfp-hide white-popup">              
                    <img src="image1.png" />
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                    <h3>Read more</h3>

             </article>
       </div>


            <article>

                <a href="#second-popup" class="popup-link">
                    Title 2            
                </a>

                <div id="second-popup" class="mfp-hide white-popup">
                     <img src="imagens/transferir (1).jpg" />
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
                     <h3>Read more</h3>
               </div>

            </article>
        </div>
    </div>

CSS：

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

.mfp-hide, .mfp-preloader {
   display:none
}

我的jQuery：

<script type="text/javascript">
    $('.popup-link').magnificPopup({
    closeBtnInside: true,
    alignTop: false
});
</script> 

结果图片：

我的小提琴示例： http://jsfiddle.net/ritz/6s834/