Support Team
posted this
28 January 2020
Hi Luis,
Sorry for the delay.
The solution is almost the same.
The Button link should look as follows:
Here "mymodal" is the Block Anchor of the second block. You can use any. I also changed the code a little.
<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;
}
</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>
...................................................
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 Luis,
Sorry for the delay.
The solution is almost the same.
The Button link should look as follows:
!modal-link.png!
Here "mymodal" is the Block Anchor of the second block. You can use any. I also changed the code a little.
<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;
}
</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>
...................................................
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
