我无法使关闭图标显示在Magnific弹出窗口上，并且显示模态时#name输入元素也没有获得焦点。知道这里有什么问题吗？

这是我的代码：

<div id="main-modal" class="mfp-hide">
    <div class="inner">
        <form novalidate="novalidate" class="subscription-form">
            <div class="fieldset">
                <p class="header">Interested?</p>
                <p class="subheader">
                    Get started now!
                </p>
            </div>
            <div class="fieldset">
                <div>
                    <input id="name" type="text" name="name" placeholder="Name"/>
                </div>
                <div>
                    <input id="email" type="email" name="email" placeholder="Email"/>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="submit-btn">
                    <span>send</span>
                </button>
            </div>
            <div class="below-submit">Register now</div>
            <div class="error-msg"></div>
            <div class="success-msg"></div>
        </form>
    </div>
</div>
<div id="success-modal" class="mfp-hide">
    <div class="inner">
        <div class="fieldset">
            <p class="header">Congratulations!</p>
            <p class="subheader">
                Thanks for signing up!
            </p>
        </div>
    </div>
</div>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script type="text/javascript">
    function openmodal() {
        $.magnificPopup.open({
            items: [
                {
                    src: '#main-modal',type: 'inline',focus: '#name',mainClass: 'mfp-fade',},{
                    src: '#success-modal',],removalDelay: 500,showCloseBtn: true,closeBtnInside: true,});
    }

$(function () {
    $('.info-btn').on('click',function () {
        openmodal();
    });

    // Exit intent
    function addEvent(obj,evt,fn) {
        if (obj.addEventListener) {
            obj.addEventListener(evt,fn,false);
        } else if (obj.attachEvent) {
            obj.attachEvent("on" + evt,fn);
        }
    }

    // Exit intent trigger
    addEvent(document,'mouseout',function (e) {
        if (e.toElement === null && e.relatedTarget === null && !localStorage.getItem('exit_intent')) {
            openmodal();
            localStorage.setItem('exit_intent','true');
        }
    });
});
</script>
<style>
    #main-modal,#success-modal {
        font-family: Oswald;
        letter-spacing: 0.25px;
        margin: 0 auto;
        position: relative;
        float: none;
    }

    #main-modal p {
        color: black;
    }

    #main-modal .inner,#success-modal .inner {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        max-width: 600px;
        height: 400px;
        align-content: center;
        box-sizing: border-box;
        border-color: rgb(54,69,79);
        border-radius: 2px;
        border-width: 1px;
        border-style: solid;
        border-image: initial;
    }

    #main-modal .close-modal,#success-modal .close-modal {
        text-decoration: none;
        float: right;
        margin-right: 8px;
        color: antiquewhite;
        font-weight: bold;
        font-size: 24px;
    }

    #main-modal .inner {
        background: url(https:/example.com/something.jpg) rgba(255,255,0.30);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
    }

    #success-modal .inner {
        background: url(https:/example.com/something.jpg) rgba(255,0.30);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
    }

    #main-modal .subscription-form {
        text-align: center;
        padding-top: 25px;
    }

    #main-modal .fieldset {
        text-align: center;
    }

    #success-modal .fieldset {
        width: 350px;
    }

    #main-modal .fieldset div {
        margin: 2px
    }

    #main-modal .header,#success-modal .header {
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        margin-top: 25px;
    }

    #main-modal .subheader,#success-modal .subheader {
        font-size: 18px;
        text-align: center;
    }

    #main-modal .below-submit {
        padding: 15px;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
    }

    #main-modal input {
        display: inline;
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 5px !important;
        width: 300px !important;
        height: 38px;
        text-align: left;
        color: rgb(0,0);
        font-size: 16px;
        font-weight: 600;
        background-color: rgb(255,255);
        border-radius: 2px;
        border-width: 1px;
        border-style: solid;
        border-image: initial;
        border-color: rgb(54,79);
    }

    #main-modal button[type=submit] {
        margin-top: 0 !important;
        min-width: 300px !important;
        max-width: 300px !important;
        position: relative;
        width: 250px;
        color: rgb(255,255);
        font-size: 20px;
        font-weight: 800;
        letter-spacing: 0.25px;
        line-height: 1;
        white-space: normal;
        padding-top: 11px;
        padding-bottom: 11px;
        text-align: center;
        word-break: break-word;
        align-self: flex-end;
        cursor: pointer;
        background: rgb(118,192,67);
        border-radius: 4px;
        border-style: none;
        border-color: rgb(0,0);
        text-transform: uppercase;
    }
</style>