Hazel/helpful-code-snippets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added html modal

Browse Source
This commit is contained in:
Hazel 2024-04-17 12:08:24 +02:00
parent 306fb0e322
commit 01f0fc9672
1 changed files with 171 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
browser/modal.html Normal file
View File

@ -0,0 +1,171 @@
<!--
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>