Popup Model

clickcomp
3 Posts
clickcomp posted this 04 October 2018
Ask a Question

I want to have a Model that pops up over my page when I click on a button. The contents of the model will be an iframe.
What is the best way to do this?

I want to have a Model that pops up over my page when I click on a button. The contents of the model will be an iframe. What is the best way to do this?
Vote to pay developers attention to this features or issue.
26 Replies
Order By: Standard | Newest
Support Team
Support Team posted this 02 March 2020

Hi

Please create a new provide topis with the detailed issue description and access to the CMS admin panel so we can investigate this issue.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi Please create a new provide topis with the detailed issue description and access to the CMS admin panel so we can investigate this issue. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
totaus
2 Posts
totaus posted this 03 April 2020

popup window - form.
I need to click on the "contact" button to open a popup window after clicking, in which the customer will be able to leave their contact information using the form and after submitting the form, the popup window will close so that he can continue browsing the page.

I tried the procedure in the forum, but it does not work. Also, opening a block in a window does not work. What's next ?

the problem is that when I follow the instructions in the desktop version of nicepage, everything works. But as soon as I edit the page I have online (running on wordpress and have the latest nicepage plugin) it doesn't work.

Please give advice to e-mail: jarda.svestka@ceskystrom.cz

I have the same problem: modal popup works in an application, it doesn't work in Wordpress

> popup window - form. > I need to click on the "contact" button to open a popup window after clicking, in which the customer will be able to leave their contact information using the form and after submitting the form, the popup window will close so that he can continue browsing the page. > > I tried the procedure in the forum, but it does not work. Also, opening a block in a window does not work. What's next ? > > the problem is that when I follow the instructions in the desktop version of nicepage, everything works. But as soon as I edit the page I have online (running on wordpress and have the latest nicepage plugin) it doesn't work. > > Please give advice to e-mail: jarda.svestka@ceskystrom.cz I have the same problem: modal popup works in an application, it doesn't work in Wordpress
Support Team
Support Team posted this 07 April 2020

Hi,

Please try the updated instruction
https://nicepage.com/doc/article/55883/how-to-create-modal-popup
and a little different script:

<script>
var buttonSelector = 'a[href*="-popup"]',
    parseId = function (href) { return href.replace('-popup', '').replace('#', ''); };
jQuery(function($) {
    $('body').on('click', buttonSelector, function (event) {
        var id = parseId(event.currentTarget.getAttribute('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');
    });
    var closeModal = function (modal) {
        modal.removeClass('modal--show');
        modal.addClass('modal--hide');
        var afterAnimation = function () {
            modal.removeClass('modal--hide');   
        };
        // This listens for the CSS animations to finish and then hides the modal
        modal[0].addEventListener("webkitAnimationEnd", afterAnimation, false);
        modal[0].addEventListener("oAnimationEnd", afterAnimation, false);
        modal[0].addEventListener("msAnimationEnd", afterAnimation, false);
        modal[0].addEventListener("animationend", afterAnimation, false);
        setTimeout(afterAnimation, 400);
    }
    // Close the modal with any element with class 'modal__close'
    $('body').on('click', '.modal__close', function (e) {
        closeModal($(e.currentTarget).closest('.modal'));
    });
    // Click outside of the modal and close it
    window.onclick = function (e) {
        if ($(e.target).is('.modal')) {
            closeModal($(e.target));
        }
    }
    // Use the escape key to close modal
    document.onkeyup = function (e) {
        e = e || window.event;
        if (e.keyCode == 27 && $('.modal--show').length === 1) {
            closeModal($('.modal--show'));
        }
    }
 });
document.addEventListener("DOMContentLoaded", function(event) {
    var buttons = document.querySelectorAll(buttonSelector);
    for (var i = 0; i < buttons.length; i++) {
        var section = document.getElementById(parseId(buttons[i].getAttribute('href')));
        if (section) {
            section.style.display = 'none';
        }       
    }
});
</script>

Does the issue continue?

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, Please try the updated instruction https://nicepage.com/doc/article/55883/how-to-create-modal-popup and a little different script: <script> var buttonSelector = 'a[href*="-popup"]', parseId = function (href) { return href.replace('-popup', '').replace('#', ''); }; jQuery(function($) { $('body').on('click', buttonSelector, function (event) { var id = parseId(event.currentTarget.getAttribute('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'); }); var closeModal = function (modal) { modal.removeClass('modal--show'); modal.addClass('modal--hide'); var afterAnimation = function () { modal.removeClass('modal--hide'); }; // This listens for the CSS animations to finish and then hides the modal modal[0].addEventListener("webkitAnimationEnd", afterAnimation, false); modal[0].addEventListener("oAnimationEnd", afterAnimation, false); modal[0].addEventListener("msAnimationEnd", afterAnimation, false); modal[0].addEventListener("animationend", afterAnimation, false); setTimeout(afterAnimation, 400); } // Close the modal with any element with class 'modal__close' $('body').on('click', '.modal__close', function (e) { closeModal($(e.currentTarget).closest('.modal')); }); // Click outside of the modal and close it window.onclick = function (e) { if ($(e.target).is('.modal')) { closeModal($(e.target)); } } // Use the escape key to close modal document.onkeyup = function (e) { e = e || window.event; if (e.keyCode == 27 && $('.modal--show').length === 1) { closeModal($('.modal--show')); } } }); document.addEventListener("DOMContentLoaded", function(event) { var buttons = document.querySelectorAll(buttonSelector); for (var i = 0; i < buttons.length; i++) { var section = document.getElementById(parseId(buttons[i].getAttribute('href'))); if (section) { section.style.display = 'none'; } } }); </script> Does the issue continue? ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
totaus
2 Posts
totaus posted this 08 April 2020

ok, the improved script works in Wordpress
thank you

ok, the improved script works in Wordpress thank you
RTM
8 Posts
RTM posted this 08 April 2020

Hi.
And how to do Onload Modal ?

Hi. And how to do Onload Modal ?

Last edited 08 April 2020 by RTM

Support Team
Support Team posted this 10 April 2020

Hi,

Unfortunately, this instruction does not allow to make onload modal.

...................................................
Sincerely,
Olivia
Nicepage Support Team

Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1
Follow us on Facebook: http://facebook.com/nicepageapp

Hi, Unfortunately, this instruction does not allow to make onload modal. ................................................... Sincerely, Olivia Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
You must log in or register to leave comments