Pinned button and modal window on every page

I need to create a button that is pinned to the bottom of the Header section and when clicked to display a modal window.

The sample is found at https://lishotto.wixsite.com/bergvlietdentaldms

This button and the modal window need to be accessed on every page of th ewebsite.

HI Romuba.
- See Demo HERE
- Download Project Link Bellow
- Insert code in:
Site Settings>HTML>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 20px 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: 70px;
  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 [class*="section"] {
        display: block !important;
        overflow: hidden;
    }
    .modal__close--x {
        z-index: 1;
    }
</style>


<script>
var buttonSelector = 'a[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>

Download Project.

Last edited 22 April 2020 by MEKKITEL

Thank you very much.

I have:

• created the button and the modal page
• added the code to the Page HTML header section
• Named the block covid19
• added the link to the button in the header and the ref is covid19-popup

But the modal window still displays and when the button is clicked an new page opened saying the requested page cannot be found. Is the code you gave me not perhaps for Wordpress and not Joomla?

Also, modals that were working on another page are now displaying in the page instead. https://www.bartwebsites.com/bergvlietdms/our-team

Last edited 23 April 2020 by Romuba

Hi.

Thank you very much.

I have:

• created the button and the modal page
• added the code to the Page HTML header section
• Named the block covid19
• added the link to the button in the header and the ref is covid19-popup

But the modal window still displays and when the button is clicked an new page opened saying the requested page cannot be found. Is the code you gave me not perhaps for Wordpress and not Joomla?

Also, modals that were working on another page are now displaying in the page instead. https://www.bartwebsites.com/bergvlietdms/our-team

H.
I haven't tried it in wordpress.
Is that by previewing in the application or in a browser it works from Nicepage desktop?
did you put the "#" - #covid-19-popup

Last edited 23 April 2020 by MEKKITEL

Thanks, I fixed that by adding the #

Now on the home page the modal content isn't displaying but nothing happens when I click on the button. On the Team page where all the other modals are that were working, and they have the #, the arrows don't open the modal and they are displaying instead.

Thanks, I fixed that by adding the #

Now on the home page the modal content isn't displaying but nothing happens when I click on the button. On the Team page where all the other modals are that were working, and they have the #, the arrows don't open the modal and they are displaying instead.

How To Create Modal Popup

Thanks but that is how I created the modals for the Team page and everything worked until I added the new modal that needs to display on all pages.

Thanks but that is how I created the modals for the Team page and everything worked until I added the new modal that needs to display on all pages.

The modal can only be displayed on one page "index.html#covid-19-popup"

I hear you but none of them are actually working presently.

Attach the project to take a look.

Last edited 23 April 2020 by MEKKITEL

I am not working on the desktop app but rather on a Joomla website so I cannot export the project.

I have a button , like yours, in the header which should fire up a popup whenever clicked, no matter which page one is on. Then I also have a page called Our Team which has many buttons that should also open popups of the person clicked.

Currently none of the popups are working.

The code you supplied I have in the Site Setting HTML Header section. For the Team page I have the code from the link you send re modal window setup in the page setting HTML header section.

I have also tried removing the code from the Teams page header but also doesn't help. I then placed the code I had in the Teams page into the Site Settings and the Teams page popups now work correctly but not the one from the button on the header.

I have now changed the Covid button to merely take one to the specific block instead of having it as a popup. The client does want a popup and also to actually automatically display when a visitor lands on the website.

Hi,

Please check the following article:
https://nicepage.com/doc/article/55883/how-to-create-modal-popup
At the bottom of the page, there is an additional code block for CMS. If you need two models on the page, please add the style block and the second script to the Site Settings. Two models should work ok. But I suggest thank you start with one modal in the Header. Please note that this page should use "Nicepage Header and Footer" if you plan to use plugin Site Settings.

...................................................
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

The code following is the only code that enables the Modal to work for the Teams page. The one on the home page still doesn't work.

I tried just the top set of code as well as just the bottom section and also both together.

This is the code that works:

<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 [class*="section"] {

    display: block !important;
    overflow: hidden;
}
.modal__close--x {
    z-index: 1;
}


parseId = function (href) { return href.replace('-popup', '').replace('#', ''); };

jQuery(function($) {

$('body').on('click', buttonSelector, function (event) {
    event.preventDefault();
    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');
});
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('data-href')));
    if (section) {
        section.style.display = 'none';
    }       
}

});