How to display a magnific popup after submitting a form?

Question

JavaScript

How to display a magnific popup after submitting a form? I wrote this code, the product is put in the cart, but the pop-up window does not appear? What's my mistake?

<form action="<?=POST_FORM_ACTION_URI?>" method="post">
    <input type="hidden" name="<?echo $arParams['ACTION_VARIABLE']?>" value="ADD2BASKET">
    <textarea rows="3" name="message" placeholder="MESSAGE"></textarea>
    <input type="submit" class="button atc" name="actionADD2BASKET" id="add-to-card linkcard<?=$arElement['ID']?>" name="<?echo $arParams['ACTION_VARIABLE'].'ADD2BASKET'?>" value="Добавить в корзину"/>


    <div id="popup-add-to-card" class="white-popup mfp-hide">
        Спасибо за заказ!
    </div>
</form>

$('#add-to-card').submit(function(e) {
        e.preventDefault();
        this.submit();


        $.ajax({
            type: "POST",
            url: "<?=POST_FORM_ACTION_URI?>",
            data: formdata,
            success: function(msg) {
                $("#popup-add-to-card").html(msg);
                $.magnificPopup.open({
                    items: {
                        src: '#popup-add-to-card',
                        type: 'inline'

                    }
                });

            },
            error: function() {
                $("#popup-add-to-card").html("failour");
                $.magnificPopup.open({
                    items: {
                        src: '#popup-add-to-card',
                        type: 'inline'

                    }
                });
            }
        });
    });

https://jsfiddle.net/z3gd0r3y/

Answer 1

type: 'inline'

this property should not be nested in items