172 lines
3.5 KiB
HTML
172 lines
3.5 KiB
HTML
|
<!--
|
||
|
|
This is an example implementation of a modal.
|
||
|
|
|
||
|
|
The boilerplate html has to be structured like this:
|
||
|
|
<div class="modal-background closed">
|
||
|
|
<div class="modal">
|
||
|
|
<div class="modal-close"></div>
|
||
|
|
|
||
|
|
<div class="modal-content">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
Then you can create a new modal object like this:
|
||
|
|
var modal = new Modal({selector: '.modal-background', ajaxUrl: '/examples/ajax.html'});
|
||
|
|
and open it with modal.open() and close it with modal.close()
|
||
|
|
-->
|
||
|
|
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>modal example</title>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
min-height: 100vh;
|
||
|
|
min-width: 100vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*
|
||
|
|
* the elements with the modal class should look like a popup
|
||
|
|
* use before or after to make the whole screen behind the modal dark
|
||
|
|
*/
|
||
|
|
.modal-background {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.closed {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal {
|
||
|
|
position: absolute;
|
||
|
|
top: 200px;
|
||
|
|
bottom: 200px;
|
||
|
|
left: 100px;
|
||
|
|
right: 100px;
|
||
|
|
background-color: white;
|
||
|
|
padding: 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-close {
|
||
|
|
position: absolute;
|
||
|
|
top: 10px;
|
||
|
|
right: 10px;
|
||
|
|
width: 30px;
|
||
|
|
height: 30px;
|
||
|
|
|
||
|
|
background-color: rgba(0, 0, 0, 0.5);
|
||
|
|
border-radius: 50%;
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-close:hover {
|
||
|
|
background-color: rgba(0, 0, 0, 0.7);
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-close:after {
|
||
|
|
|
||
|
|
content: 'X';
|
||
|
|
color: white;
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 20px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* style the modal test open button and making it pretty and centering it and making it bigger */
|
||
|
|
#modal-test-open {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
padding: 10px 20px;
|
||
|
|
font-size: 20px;
|
||
|
|
border-radius: 5px;
|
||
|
|
background-color: #007bff;
|
||
|
|
color: white;
|
||
|
|
border: none;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<button id="modal-test-open" onclick="modal.open()">open modal</button>
|
||
|
|
|
||
|
|
<div class="modal-background closed">
|
||
|
|
<div class="modal">
|
||
|
|
<div class="modal-close"></div>
|
||
|
|
|
||
|
|
<div class="modal-content">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
class Modal {
|
||
|
|
#opened = false;
|
||
|
|
|
||
|
|
constructor({
|
||
|
|
selector = '.modal-background',
|
||
|
|
ajaxUrl = undefined
|
||
|
|
} = {}) {
|
||
|
|
this.modal = document.querySelector(selector);
|
||
|
|
this.ajaxUrl = ajaxUrl;
|
||
|
|
|
||
|
|
this.modal.addEventListener('click', this.close.bind(this));
|
||
|
|
this.modal.querySelector('.modal').addEventListener('click', (e) => e.stopPropagation());
|
||
|
|
this.closeElement.addEventListener('click', this.close.bind(this));
|
||
|
|
}
|
||
|
|
|
||
|
|
get contentElement() {
|
||
|
|
return this.modal.querySelector('.modal .modal-content');
|
||
|
|
}
|
||
|
|
|
||
|
|
get closeElement() {
|
||
|
|
return this.modal.querySelector('.modal .modal-close');
|
||
|
|
}
|
||
|
|
|
||
|
|
open() {
|
||
|
|
console.log('open');
|
||
|
|
this.modal.classList.remove('closed');
|
||
|
|
|
||
|
|
this.contentElement.innerHTML = 'loading...';
|
||
|
|
|
||
|
|
if (this.ajaxUrl) {
|
||
|
|
fetch(this.ajaxUrl)
|
||
|
|
.then(response => response.text())
|
||
|
|
.then(html => this.contentElement.innerHTML = html)
|
||
|
|
.then(() => this.#opened = true);
|
||
|
|
} else {
|
||
|
|
this.#opened = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
close() {
|
||
|
|
console.log('close');
|
||
|
|
this.contentElement.innerHTML = '';
|
||
|
|
this.modal.classList.add('closed');
|
||
|
|
this.#opened = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var modal = new Modal({ajaxUrl: '/examples/ajax.html'});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|