modal pop-up

Ferring B.V.
3 Posts
Ferring B.V. posted this 02 June 2020
Ask a Question

dear support team,
i have implemented the modal-popup and it is working great for buttons and links.
however i would like this functionality also when i add a link to an image or div, here you use the data-href instead of the <a> tag.
can you help me out on how to do it?

div class="u-align-center u-container-style u-layout-cell u-left-cell u-size-15 u-size-30-md u-layout-cell-1" data-href="#modal-popup"

thanks in advance.
Dennis

dear support team, i have implemented the modal-popup and it is working great for buttons and links. however i would like this functionality also when i add a link to an image or div, here you use the data-href instead of the &lt;a&gt; tag. can you help me out on how to do it? div class=&quot;u-align-center u-container-style u-layout-cell u-left-cell u-size-15 u-size-30-md u-layout-cell-1&quot; data-href=&quot;#modal-popup&quot; thanks in advance. Dennis
modal-popup
Vote to pay developers attention to this features or issue.
1 Reply
Order By: Standard | Newest
Ferring B.V.
3 Posts
Ferring B.V. posted this 03 June 2020

add this:
var divSelector = 'div[data-href*="-popup"]';
and this:
$('body').on('click', divSelector, function (event) {

    var id = parseId(event.currentTarget.getAttribute('data-href'));
    var modalId = 'modal-' + id;
    if ($('#' + modalId).length === 0) {
        $('body').append('<div class="flex align-center align-vert modal modal--align" id="' + modalId + '">' +
            '    <div class="modal__container">' +
            '        <span class="modal__close modal__close--x" aria-hidden="true">×</span>' +
            '        ' + document.getElementById(id).outerHTML +
            '    </div>' +
            '</div>');      
    }
    $('#' + modalId).addClass('modal--show');
});
add this: var divSelector = 'div[data-href*="-popup"]'; and this: $('body').on('click', divSelector, function (event) { var id = parseId(event.currentTarget.getAttribute('data-href')); var modalId = 'modal-' + id; if ($('#' + modalId).length === 0) { $('body').append('<div class="flex align-center align-vert modal modal--align" id="' + modalId + '">' + ' <div class="modal__container">' + ' <span class="modal__close modal__close--x" aria-hidden="true">×</span>' + ' ' + document.getElementById(id).outerHTML + ' </div>' + '</div>'); } $('#' + modalId).addClass('modal--show'); });
You must log in or register to leave comments

Company
Product
Themes & Templates
Nicepage
Web Design