使用Magnific Popup通过一些用户操作调用多个弹出窗口

I already can implemented the magnific popup and works perfectly.

But now, I want to use it more. Lets say I have a button and show the first popup. Here is the picture:

here is the first popup, I already added <code>closeOnBgClick::false</code> to prevent the popup close.

Lets say I choose "I don't know my password", it must show the second pop up. Here is the picture:

I have to input my email so the system can send the password to my email

If I choose back, I can back to the first popup. If I choose send, it will show the last popup. Here is the picture.

no caption

All I done so far is call the first popup, using AJAX. At the troublesignin.php I also do the same. The result is not showing the popup like I want, but redirect to the URL.

<script src="js/jquery.magnific-popup.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function() {

            $('.simple-ajax-popup').magnificPopup({
                type: 'ajax',
                closeOnBgClick:false
            });

        });
    </script>
<a href="troublesignin.php" class="trouble simple-ajax-popup">TROUBLE SIGNING IN?</a>

Any clue or solution? Thanks.

Update: This is the main screen.

demonstration

</div>