打开modal over modal的问题？

Question

所以我试图打开模态而不是其他模态。有一个链接说“登录”，这为我打开了另一种模式。为什么会这样？

来自以下

的主模式调用

<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="160">
    <li><a href="#modal-get-started" data-lightbox="inline">Sign Up</a></li>

    <li class="menu-item-emphasis"><a href="#modal-login" data-lightbox="inline"><div>Login</div></a></li>                          
</ul>

主要模式

<div class="modal1 mfp-hide" id="modal-get-started" >
    <div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
        <div style="padding: 50px;">
            <form  name="reg_form" id="get-started-form"  class="nobottommargin">

                <div class="row clearfix">
                    <div class="col-sm-12">
                        <h3 class="font-body">Register for Free Trial</h3>
                    </div>
                </div>


            <button  class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>

            <button  id="customGoogleBtn1" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button> 
           <br>
           <div style='padding-top: 30px;padding-left: 50px' ng-show ="errorAlreadyRegister">
                <span  style='color:red;x' >Seems already registered. <a ng-click= "closePopup()" href="#" > Log in </a> instead?</span>    
            </div>


        </form>
      </div>
    </div>
</div>

想要在登录链接上打开

<div class="modal1 mfp-hide" id="modal-login" >
    <div class="block divcenter" style="background-color: #FFF; max-width: 400px;">
        <div style="padding: 50px;">
            <h3 class="font-body">Login to your Account</h3>
            <form  class="nobottommargin">
                <div class="col_full">
                    <label class="font-body capitalize" for="login-form-modal-username">Username:</label>
                    <input type="text" id="login-form-modal-username" name="login-form-modal-username" value="" class="form-control" />
                </div>

                <div class="col_full">
                    <label class="font-body capitalize" for="login-form-modal-password">Password:</label>
                    <input type="password" id="login-form-modal-password" name="login-form-modal-password" value="" class="form-control" />
                </div>

                <div class="col_full nobottommargin">
                    <button class="button button-rounded nomargin" id="login-form-modal-submit" name="login-form-modal-submit" value="login">Login</button>
                    <a href="#" class="fright">Forgot Password?</a>
                </div>
            </form>
            <div class="line line-sm"></div>
            <button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>

            <button id="customGoogleBtn" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button> 
            <!-- <a href="#" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</a> -->
        </div>
    </div>
</div>

在登录链接上调用的功能

$scope.closePopup = function(){
        $.magnificPopup.close();
        $.magnificPopup.open({
          items: {
            src: '#modal-login'
          }
        });
    }