Popup Model

clickcomp
3 Posts
clickcomp posted this 04 October 2018

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 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 05 October 2018

Hi Douglas,

We do not have such option in the application. You may try to use the HTML control if you have the ready code for such functionality.
We'll add your suggestion to our wish list, thanks.
...................................................
Sincerely,
Hella
Nicepage Support Team

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

Hi Douglas, We do not have such option in the application. You may try to use the HTML control if you have the ready code for such functionality. We'll add your suggestion to our wish list, thanks. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
clickcomp
3 Posts
clickcomp posted this 05 October 2018

What I am trying to do is this:
https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

I put the HTML into a "Shortcode" and the CSS in the "Page Settings" "Additional CSS"
for the life of me I can not get the Modal to display.

What I am trying to do is this: https://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/ I put the HTML into a "Shortcode" and the CSS in the "Page Settings" "Additional CSS" for the life of me I can not get the Modal to display.
Support Team
Support Team posted this 05 October 2018

Hi Douglas,

Our developers have provided the instruction on how to implement the desired functionality.

  1. Open the Website Settings >> HTML tab and add the code from the bottom of this message in the Additional HEAD HTML input.
  2. Create two blank section on your page. In the first one add the Button control. In the second section put the content that you want to see in the popup window.
  3. Open the Button >> Address option and choose the Destination >> Section. Click on the section with the module content. Then in the URL input add the -popup in the end of the section id. Like on the screen shot here:
    popup-section.png

That's what you will see in the preview and on your site:

popup-window.png

And here is the code for the Additional HEAD HTML:

<style>
/* The MIT License (MIT) Copyright (c) 2014 Toby */
/* demo only */
.flex { display: flex; }
.align-center { justify-content: center; }
.align-vert,.align-vert.align-center { align-items: center; }
/* end demo */

.modal { display: none; }
.modal--show,
.modal--hide { display: flex; } /* classes fired by js for animation control */

/* This is on the wrapper for the whole modal */
.modal--align {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
}

.modal__container {
  position: relative;
  width: 100%;
  max-width: 1300px;
  padding: 20px 20px 0px 20px;
  margin: 12px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

/* As there is no href to avoid the hash being added to the URL when clicked we add a pointer */
/* This 'x' is hidden from screen readers as there is an accessible close button in the modal */
.modal__close--x:hover {
  cursor: pointer;
}

/* Animations */
/* Open */
.modal.modal--show {
  animation: modal-open 0.3s;
}

@keyframes modal-open {
  0%    { opacity: 0; }
  100%  { opacity: 1; }
}

/* Close */
.modal.modal--hide {
  animation: modal-close 0.3s;
}

@keyframes modal-close {
  0%    { opacity: 1; }
  100%  { opacity: 0; }
}

.modal__close--x {
  position: absolute;
  line-height: 19px;
  top: 10px;
  right: 10px; 
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  font-family: "Open Sans", "Arial","sans-serif";
  opacity: .2;
}

.modal {
  text-align: center;
}
</style>

<style>
    .modal__container [id*="sec-"] {
        display: block !important;
        overflow: hidden;
    }
    .modal__close--x {
        z-index: 1;
    }
</style>

<script>
var buttonSelector = 'a[href*=sec][href*="-popup"]',
    parseId = function (href) { return href.replace('-popup', '').replace('#', ''); };
window.onload = 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>

...................................................
Sincerely,
Hella
Nicepage Support Team

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

Hi Douglas, Our developers have provided the instruction on how to implement the desired functionality. 1. Open the Website Settings >> HTML tab and add the code from the bottom of this message in the Additional HEAD HTML input. 2. Create two blank section on your page. In the first one add the Button control. In the second section put the content that you want to see in the popup window. 3. Open the Button >> Address option and choose the Destination >> Section. Click on the section with the module content. Then in the URL input add the `-popup` in the end of the section id. Like on the screen shot here: !popup-section.png! That's what you will see in the preview and on your site: !popup-window.png! And here is the code for the Additional HEAD HTML: <style> /* The MIT License (MIT) Copyright (c) 2014 Toby */ /* demo only */ .flex { display: flex; } .align-center { justify-content: center; } .align-vert,.align-vert.align-center { align-items: center; } /* end demo */ .modal { display: none; } .modal--show, .modal--hide { display: flex; } /* classes fired by js for animation control */ /* This is on the wrapper for the whole modal */ .modal--align { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0, 0, 0, 0.3); z-index: 999; } .modal__container { position: relative; width: 100%; max-width: 1300px; padding: 20px 20px 0px 20px; margin: 12px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; } /* As there is no href to avoid the hash being added to the URL when clicked we add a pointer */ /* This 'x' is hidden from screen readers as there is an accessible close button in the modal */ .modal__close--x:hover { cursor: pointer; } /* Animations */ /* Open */ .modal.modal--show { animation: modal-open 0.3s; } @keyframes modal-open { 0% { opacity: 0; } 100% { opacity: 1; } } /* Close */ .modal.modal--hide { animation: modal-close 0.3s; } @keyframes modal-close { 0% { opacity: 1; } 100% { opacity: 0; } } .modal__close--x { position: absolute; line-height: 19px; top: 10px; right: 10px; font-size: 32px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; font-family: "Open Sans", "Arial","sans-serif"; opacity: .2; } .modal { text-align: center; } </style> <style> .modal__container [id*="sec-"] { display: block !important; overflow: hidden; } .modal__close--x { z-index: 1; } </style> <script> var buttonSelector = 'a[href*=sec][href*="-popup"]', parseId = function (href) { return href.replace('-popup', '').replace('#', ''); }; window.onload = 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> ................................................... Sincerely, Hella Nicepage Support Team Please subscribe our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
clickcomp
3 Posts
clickcomp posted this 05 October 2018

Freaking Brilliant!!
I am so NOT regretting my purchase of this software!!!
I love it!
Thank you so much.

Freaking Brilliant!! I am so NOT regretting my purchase of this software!!! I love it! Thank you so much.
Support Team
Support Team posted this 05 October 2018

Douglas,

You're welcome!
Please let us know if you need our further assistance.

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

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

Douglas, You're welcome! Please let us know if you need our further assistance. ................................................... Sincerely, Nicepage Support Team Please subscribe our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
LGALLP
176 Posts
LGALLP posted this 14 May 2019

Hello, Nicepage Team.

I´ve tried this Pop-up solution and it´s great! But, have a question: What if I made a Pop-Up subscribe to download form and I would like people to go to a "Thank you for subscribing, you can download now" page after the Pop-up form is submited?

I ask because the "go to - after submiting" is not available for all cases.

Hello, Nicepage Team. I´ve tried this Pop-up solution and it´s great! But, have a question: What if I made a Pop-Up subscribe to download form and I would like people to go to a "Thank you for subscribing, you can download now" page after the Pop-up form is submited? I ask because the "go to - after submiting" is not available for all cases.
Support Team
Support Team posted this 15 May 2019

Hi Luis,

I assume that it should be probably set somewhere in your form code to make the Submit button of your form redirect the user to the desired page with the download.

...................................................
Sincerely,
Hella
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 Luis, I assume that it should be probably set somewhere in your form code to make the Submit button of your form redirect the user to the desired page with the download. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
tempelh2
28 Posts
tempelh2 posted this 26 August 2019

Hi Hella,

I was able to also integrate this solution into my project and it's almost working but I'm experiencing an little issue.

The section to be displayed in the popup consists of a two-colum-grid: One grid cell contains an image one contains left alligned text.

Section-with-left-alligned-text.jpg

When the popup is displayed the text is displayed centered.

Popup-with-centered-text.jpg

How can this be fixed?

Thanks,
Holger

Hi Douglas,

Our developers have provided the instruction on how to implement the desired functionality.

  1. Open the Website Settings >> HTML tab and add the code from the bottom of this message in the Additional HEAD HTML input.
  2. Create two blank section on your page. In the first one add the Button control. In the second section put the content that you want to see in the popup window.
  3. Open the Button >> Address option and choose the Destination >> Section. Click on the section with the module content. Then in the URL input add the -popup in the end of the section id. Like on the screen shot here:

...

...................................................
Sincerely,
Hella
Nicepage Support Team

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

Hi Hella, I was able to also integrate this solution into my project and it's almost working but I'm experiencing an little issue. The section to be displayed in the popup consists of a two-colum-grid: One grid cell contains an image one contains left alligned text. !Section-with-left-alligned-text.jpg! When the popup is displayed the text is displayed centered. !Popup-with-centered-text.jpg! How can this be fixed? Thanks, Holger > Hi Douglas, > > Our developers have provided the instruction on how to implement the desired functionality. > > 1. Open the Website Settings >> HTML tab and add the code from the bottom of this message in the Additional HEAD HTML input. > 2. Create two blank section on your page. In the first one add the Button control. In the second section put the content that you want to see in the popup window. > 3. Open the Button >> Address option and choose the Destination >> Section. Click on the section with the module content. Then in the URL input add the `-popup` in the end of the section id. Like on the screen shot here: ... > ................................................... > Sincerely, > Hella > Nicepage Support Team > > Please subscribe our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 > Follow us on Facebook: http://facebook.com/nicepageapp
Support Team
Support Team posted this 26 August 2019

Hi,

I assume that you need to remove this part from the styles of the popup:

.modal {
  text-align: center;
}

...................................................
Sincerely,
Hella
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, I assume that you need to remove this part from the styles of the popup: .modal { text-align: center; } ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
mail18
13 Posts
mail18 posted this 09 September 2019

Unfortunately this is not working for me. The popup window doesn't open, instead the whole page reopen in a new window. I've checked the popup settings and popups are allowed for the website.
Any suggestions?

Thanks,
Anette

Unfortunately this is not working for me. The popup window doesn't open, instead the whole page reopen in a new window. I've checked the popup settings and popups are allowed for the website. Any suggestions? Thanks, Anette
Support Team
Support Team posted this 09 September 2019

Douglas,

There is no standard solution for now. Please create a private topic and attach your project. We will try to find a solution.

Thank you!
...................................................
Sincerely,
Nicepage Support Team

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

Douglas, There is no standard solution for now. Please create a private topic and attach your project. We will try to find a solution. Thank you! ................................................... Sincerely, Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
steosx2
1 Posts
steosx2 posted this 12 December 2019

Hi staff nicepage, in preview it works, while when it generates the html the modal pop up doesn't work anymore.
Can you help me?

Hi staff nicepage, in preview it works, while when it generates the html the modal pop up doesn't work anymore. Can you help me?
Support Team
Support Team posted this 13 December 2019

Hi,

I've tested this solution in the exported HTML website ad it works as it should. Please create a new Private topic, describe the issue in more detail and provide the project.

...................................................
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, I've tested this solution in the exported HTML website ad it works as it should. Please create a new Private topic, describe the issue in more detail and provide the project. ................................................... 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
dania.schneider
6 Posts
dania.schneider posted this 21 January 2020

I tried this but the link popup is no longer the same (after the update?)

Thank you

see image attachment

I tried this but the link popup is no longer the same (after the update?) Thank you see image attachment

Last edited 21 January 2020 by dania.schneider

dania.schneider
6 Posts
dania.schneider posted this 21 January 2020

I tried this but the link popup is no longer the same (after the update?)

Thank you

see image attachment

If you link page or link you then can type -popup in and it works

> I tried this but the link popup is no longer the same (after the update?) > > Thank you > > see image attachment If you link page or link you then can type -popup in and it works
info19132
10 Posts
info19132 posted this 11 February 2020

In the desktop version 2.6.2 (Windows) it works perfectly! Unfortunately, no popup is opened in the Joomla plugin (also 2.6.2). Why is that? Is there already a solution for this?

In the desktop version 2.6.2 (Windows) it works perfectly! Unfortunately, no popup is opened in the Joomla plugin (also 2.6.2). Why is that? Is there already a solution for this?
Support Team
Support Team posted this 20 February 2020

Hi,

Please check that all the links are set correctly after importing the content to the site. There should be no difference in implementing the pop-up solution in the application and in the plug-in.

...................................................
Sincerely,
Hella
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 check that all the links are set correctly after importing the content to the site. There should be no difference in implementing the pop-up solution in the application and in the plug-in. ................................................... Sincerely, Hella Nicepage Support Team Please subscribe to our YouTube channel: http://youtube.com/nicepage?sub_confirmation=1 Follow us on Facebook: http://facebook.com/nicepageapp
icoslaw
4 Posts
icoslaw posted this 22 February 2020

I tried this but the link popup is no longer the same (after the update?)

Thank you

see image attachment

If you link page or link you then can type -popup in and it works

How you can do this now??
thx for answer ...

> > I tried this but the link popup is no longer the same (after the update?) > > > > Thank you > > > > see image attachment > > If you link page or link you then can type -popup in and it works How you can do this now?? thx for answer ...
Support Team
Support Team posted this 25 February 2020

Hi,

In the new dialog, you need to create a link to the Page (not Block) and add the page name. For example:

Page-1.html#blockanchor

...................................................
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, In the new dialog, you need to create a link to the Page (not Block) and add the page name. For example: Page-1.html#blockanchor ................................................... 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
jerryblummenfeld
1 Posts
jerryblummenfeld posted this 29 February 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

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

Last edited 29 February 2020 by jerryblummenfeld

You must log in or register to leave comments