This short instruction described how to display one of the Nicepage Blocks in the Modal Window.

  1. Open the Site Settings >> HTML tab and add the code provided below in the Additional HEAD HTML field.
  2. Create two new Blocks on your page. In the first one, add the Button or Hyperlink control that will be used to open Modal Window. In the second Block put the content that you want to see in the popup window.
  3. Open the Button >> Hyperlink option and choose the Block from the current page. Then add the following parameter to the Address field at the end of the block id:

    -popup

popup-section2.png

Result:

popup-window.png

Add this code to the Additional HEAD HTML field:

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

This short instruction described how to display one of the Nicepage Blocks in the Modal Window. 1. Open the *Site Settings* >> *HTML* tab and add the code provided below in the *Additional HEAD HTML* field. 2. Create two new Blocks on your page. In the first one, add the *Button* or *Hyperlink* control that will be used to open Modal Window. In the second Block put the content that you want to see in the popup window. 3. Open the *Button* >> *Hyperlink* option and choose the Block from the current page. Then add the following parameter to the *Address* field at the end of the block id: -popup !popup-section2.png! Result: !popup-window.png! Add this code to the *Additional HEAD HTML* field: <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>