Magnifi c всплывающее окно не показывает закрыть окно

Question

Мне не удается отобразить значок закрытия во всплывающем окне Magnifi c, а элемент ввода #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',
                    type: 'inline',
                    mainClass: 'mfp-fade',
                },
            ],
            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, 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, 255, 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, 0);
        font-size: 16px;
        font-weight: 600;
        background-color: rgb(255, 255, 255);
        border-radius: 2px;
        border-width: 1px;
        border-style: solid;
        border-image: initial;
        border-color: rgb(54, 69, 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, 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, 0);
        text-transform: uppercase;
    }
</style>