Почему не срабатывает открытие модального окна?

Question

[Minusator]

Есть модальное окно, которое открывается по ссылке:

<a href="#" class="sf-open-modal" data-src="#my-modal">
Открыть модальное окно
</a>

Если добавить внутрь тега <a> другие теги, к примеру <p>, то модальное окно перестает открываться:

<a href="#" class="sf-open-modal" data-src="#my-modal">
<p>Открыть модальное окно</p>
</a>

JS

global.SimpleModal = function() {
        var modal_triggers = document.querySelectorAll(".sf-open-modal"),
            modal_closers = document.querySelectorAll(".sf-modal-closer");

        if (modal_triggers.length) {
            for (var m = 0; m < modal_triggers.length; m++) {
                var trigger = modal_triggers[m];

                if (trigger) {
                    trigger.onclick = function(e) {
                        e.preventDefault();

                        var src = e.target.getAttribute("data-src");

                        if (src) {
                            var targetModal = document.querySelector(src);

                            targetModal.classList.add("active");
                        }
                    }
                }
            }
        }

        if (modal_closers.length) {
            for (var c = 0; c < modal_closers.length; c++) {
                var closer = modal_closers[c];

                if (closer) {
                    closer.onclick = function(e) {
                        e.preventDefault();
                        e.target.closest(".sf-modal").classList.remove("active");
                    }
                }
            }
        }

        document.onclick = function(e) {
            if (e.target.classList.contains("sf-modal-wrapper")) {
                e.target.parentNode.classList.remove("active");
            }
        }
    };

    SimpleModal();

Как сделать так, чтобы модальное окно срабатывало при оборачивании любых тегов <p>, <span> <div>?

Comments

[Сергей delphinpro]

Здесь вы справились с этой проблемой

e.target.closest(".sf-modal").classList.remove("active");

А здесь почему-то не можете сделать то же самое
var src = e.target.getAttribute("data-src");

[Сергей delphinpro]

global.SimpleModal = function() {
    document.querySelectorAll(".sf-open-modal").forEach(trigger => {
        trigger.addEventListener('click', e => {
            e.preventDefault();
            const targetModal = document.querySelector(trigger.dataset.src);
            if (targetModal) targetModal.classList.add("active");
        });
    });

    document.querySelectorAll(".sf-modal-closer").forEach(closer => {
        closer.addEventListener('click', e => {
            e.preventDefault();
            closer.closest(".sf-modal").classList.remove("active");
        })
    });

    document.addEventListener('click', e => {
        if (e.target.classList.contains("sf-modal-wrapper")) {
            e.target.parentNode.classList.remove("active");
        }
    });
};

SimpleModal();

[Minusator]

Сергей delphinpro, благодарю!