<button class="modal__trigger" data-id="modal-00">Activate Modal</button>
<div id="modal-00" class="modal" aria-hidden>
<div class="modal__overlay modal__trigger" data-id="modal-00"></div>
<div class="modal__window">
<button class="modal__close modal__trigger" data-id="modal-00"></button>
<div class="modal__content">
</div>
</div>
</div>
<button class="modal__trigger" data-id="modal-00">Activate Modal</button>
<div id="modal-00" class="modal" aria-hidden>
<div class="modal__overlay modal__trigger" data-id="modal-00"></div>
<div class="modal__window">
<button class="modal__close modal__trigger" data-id="modal-00"></button>
<div class="modal__content">
</div>
</div>
</div>
{
"person": {
"image": "/images/team/irene-braam.png",
"name": "Irene Braam",
"bio": "Irene Braam joined the Bertelsmann Foundation as executive director in April 2016. She is also the first vice president and board director of the Bertelsmann Foundation Board of Directors. Irene is an experienced lawyer and media expert, and worked for over ten years with the Bertelsmann company. She began as director of government relations of the Brussels Liaison Office in 2005 and became senior vice president of government relations in September 2011. Irene developed, among other things, a European platform for global discussion about the digital transformation of the media world. The series was held in Brussels, Berlin, Madrid and London. Not only did she represent and position Bertelsmann’s interests in the EU, she also promoted Bertelsmann in other cultural and social events in Brussels, such as UFA Film nights, previews of Fremantle Media’s productions, exhibitions and public panel discussions. After studying law at Maastricht University, the Dutch native began her professional career in 1998 in the music industry. Irene was head of international, legal and business affairs at Naïve Records in Paris, in charge of business development for Midbar Tech Ltd. in Tel Aviv, and served as both director of public policy and government affairs, and director of legal and business affairs at the Universal Music Group in London and Brussels. Irene is a native speaker of Dutch, and also speaks English, German, French and some Spanish.",
"job_title": "Executive Director",
"links": {
"email": null,
"linkedin": "https://www.linkedin.com/",
"twitter": "https://www.twitter.com/"
}
}
}
document.querySelectorAll('.modal__trigger').forEach(el => {
el.onclick = () => {
const target = el.getAttribute('data-id');
const modal = document.getElementById(target);
const body = document.getElementsByTagName('body');
if (modal.hasAttribute('aria-hidden')) {
modal.removeAttribute('aria-hidden')
modal.classList.add('modal--shown');
body[0].classList.add('modal--shown');
} else {
modal.setAttribute('aria-hidden', '')
modal.classList.remove('modal--shown');
body[0].classList.remove('modal--shown');
}
};
});
// Maybe we should move the class toggling to the <body> element,
// and deal with the displays at the CSS level.
// This will minimize JS intervention in the DOM, and possibilitate the
// Overflow: hidden; for the <body> without new JS lines
// Structure
.modal {
display: none;
transition: all .4s ease;
position: fixed;
top: 0;
left: 0;
z-index: 10000;
&__overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
}
&__trigger { cursor: pointer; }
&__close {
all: unset; // Resets button native styles
float: right;
position: relative;
top: 15px;
right: 40px;
cursor: pointer;
&:after {
@extend .u-material-icons;
content: 'close';
}
}
&__window {
position: relative;
padding: 40px;
max-height: 90vh;
max-width: 80vw;
overflow-y: auto;
}
}
.modal.modal--shown {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
body.modal--shown { overflow: hidden; }
There are no notes for this item.