Skip to content

modal examples #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Asharee merged 5 commits into from
May 22, 2026
Merged

modal examples #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c4c2aa9
Update modal-scroll.html
Asharee May 6, 2026
69ebdf4
Update modal.html
Asharee May 6, 2026
9de36e0
Update modal-scroll.html
Asharee May 13, 2026
3441ee6
Update modal-scroll.html
Asharee May 20, 2026
85e0317
Update modal-scroll.html
Asharee May 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 126 additions & 19 deletions html/modal-scroll.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,14 +127,128 @@
<body>
<section class="newsletter">
<div class="newsletter-content">
<h1>My newsletter</h1><br>
<h3>Hi there! </h3><br>
<p>Welcome to my newsletter.<br>
I write about things that are on my mind and fun personal updates.</p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>Thanks for reading!</p>
<h1>Scroll Modal Template</h1><br>
<p>Scroll down to see the example modal appear.</p><br>
<p>Enjoy this poem written by Pablo Neruda while you scroll.</p><br><br>

<p><strong>Ode To The Cat</strong></p>

<p><em>The animals were imperfect,<br>
long-tailed,<br>
unfortunate in their heads.<br>
Little by little they<br>
put themselves together,<br>
making themselves a landscape,<br>
acquiring spots, grace, flight.<br>
The cat,<br>
only the cat<br>
appeared complete and proud:<br>
he was born completely finished,<br>
walking alone and knowing what he wanted.<br>
<br>
Man wants to be fish or fowl,<br>
the snake would like to have wings<br>
the dog is a disoriented lion,<br>
the engineer would like to be a poet,<br>
the fly studies to be a swift,<br>
the poet tries to imitate the fly,<br>
but the cat<br>
only wants to be a cat<br>
and any cat is a cat<br>
from his whiskers to his tail,<br>
from his hopeful vision of a rat<br>
to the real thing,<br>
from the night to his golden eyes.<br>
<br>
There is no unity<br>
like him,<br>
the moon and the flower<br>
do not have such context:<br>
he is just one thing<br>
like the sun or the topaz,<br>
and the elastic line of his contours<br>
is firm and subtle like<br>
the line of a ship's prow.<br>
His yellow eyes<br>
have just one<br>
groove<br>
to coin the gold of night time.<br>
<br>
Oh little<br>
emperor without a sphere of influence<br>
conqueror without a country,<br>
smallest living-room tiger, nuptial<br>
sultan of the sky,<br>
of the erotic roof-tiles,<br>
the wind of love<br>
in the storm<br>
you claim<br>
when you pass<br>
and place<br>
four delicate feet<br>
on the ground,<br>
smelling,<br>
distrusting<br>
all that is terrestrial,<br>
because everything<br>
is too unclean<br>
for the immaculate foot of the cat.<br>
<br>
Oh independent wild beast<br>
of the house<br>
arrogant<br>
vestige of the night,<br>
lazy, gymnastic<br>
and alien,<br>
very deep cat,<br>
secret policeman<br>
of bedrooms,<br>
insignia<br>
of a<br>
disappeared velvet,<br>
surely there is no<br>
enigma<br>
in your manner,<br>
perhaps you are not a mystery,<br>
everyone knows of you<br>
and you belong<br>
to the least mysterious inhabitant,<br>
perhaps everyone believes it,<br>
everyone believes himself the owner,<br>
proprietor,<br>
uncle<br>
of a cat,<br>
companion,<br>
colleague,<br>
disciple<br>
or friend<br>
of his cat.<br>
<br>
Not me.<br>
I do not subscribe.<br>
I do not know the cat.<br>
I know it all, life and its archipelago,<br>
the sea and the incalculable city,<br>
botany,<br>
the gyneceum and its frenzies,<br>
the plus and the minus of mathematics,<br>
the volcanic frauds of the world,<br>
the unreal shell of the crocodile,<br>
the unknown kindness of the fireman,<br>
the blue atavism of the priest,<br>
but I cannot decipher a cat.<br>
My reason slips on his indifference,<br>
his eyes have golden numbers.<br>
</em></p><br>
<p><strong>Cat Photo Gallery</strong></p>
<figure style= "margin: 3rem">
<img src="https://placecats.com/poppy/400/400" alt="photo of a cute calico cat named Poppy" >
<figcaption>This is Polly!</figcaption>
</figure>
<figure style= "margin: 3rem">
<img src="https://placecats.com/louie/400/400" alt="a photo of a ginger cat named Louie playing with a green mouse toy">
<figcaption>This is Louie!</figcaption>
</figure>
</div>
</section>
<section class="modal hidden">
Expand All @@ -146,9 +260,7 @@ <h3>Stay in touch!</h3>
<p>Subscribe to my newsletter.</p>
</div>
<label for="email">Email</label>
<input type="email" name="emial" id="email" placeholder="me@example.com">
<button class="btn">Subcribe</button>
=
<input type="email" name="email" id="email" placeholder="me@example.com">
<div>
<p>
<a href="https://buttondown.com" target="_blank">
Expand All @@ -175,25 +287,20 @@ <h3>Stay in touch!</h3>
window.removeEventListener("scroll", scrollEvent)};

scrollEvent = function() {
// Calculate how far we've scrolled
const scrolled = window.scrollY;

// Calculate the total height of the page
const totalHeight = document.body.scrollHeight;

// Check if we're near the bottom (within 200px)
if (scrolled + window.innerHeight >= totalHeight - 200) {
// Load more content
openModal();
};
};


window.addEventListener('scroll', scrollEvent);

modal.addEventListener("click", closeModal);
closeModalBtn.addEventListener("click", closeModal);

overlay.addEventListener("click", closeModal);

</script>
</body>
</html>
</html>
2 changes: 1 addition & 1 deletion html/modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ <h3>Stay in touch!</h3>
modal.classList.add("hidden");
overlay.classList.add("hidden");
};

closeModalBtn.addEventListener("click", closeModal);

overlay.addEventListener("click", closeModal);
Expand Down
Loading